AngularJS中的过滤器filter用法完全解析

前端技术 2023/09/01 JavaScript

在AngularJS的世界里，filter提供了一种格式化数据的方法，Angular也提供给我们了很多内建的过滤器，并且建立自定义过滤器也是相当的简单

在HTML的模板绑定{{}}中，我们使用 | 来调用过滤器，比如，我们想让字符串全部大写字符显示：

{{ name | uppercase }}

当然了，我们也可以在JavaScript中使用$filter服务来调用过滤器，还拿字符串大写来举例：

app.controller(\'DemoController\', [\'$scope\', \'$filter\', 
 function($scope, $filter) {
 
  $scope.name = $filter(\'lowercase\')(\'Ari\');
}]);

如何传递参数到filter呢？只需要把参数放在filter之后，中间加个冒号（如果有多个参数要传递，在每个参数后加上冒号）比如，数字过滤器可以帮助我们限制数字的位数，如果想显示两位小数，加上number:2就可以了

{{ 123.456789 | number:2 }}

filter过滤器主要用来过滤一个数组数据并返回一个包含子数组数据的新数组。

比如，在客户端搜索时，我们可以快速的从数组中过滤出我们想要的结果。

这个filter方法接收一个string，object，或者function参数用来选择/移除数组元素。

下满我们具体来看：

一，内置的过滤器
1，uppercase，lowercase大小转换

{{ \"lower cap string\" | uppercase }}   //结果：LOWER CAP STRING 
{{ \"TANK is GOOD\" | lowercase }}     //结果：tank is good

 ｜这里的竖线是一种管道功能，如果对linux比较熟悉的话，这块的｜根linux的管道功能，基本是一样的2，json格式化

{{ {foo: \"bar\", baz: 23} | json }}  //结果：{ \"foo\": \"bar\", \"baz\": 23 }

注意：bza没格式前是没有双引号的，格式化后就转换成了json数据了。

3，date格式化

mysql时间戳 ng-bind=\"message.time * 1000 | date:\'yyyy-mm-dd\'\"  

{{ 1304375948024 | date:\'medium\'}}   //May 03, 2011 06:39:08 PM 
{{ 1304375948024 | date }}             //结果：May 3, 2011 
{{ 1304375948024 | date:\"MM/dd/yyyy @ h:mma\" }}   //结果：05/03/2011 @ 6:39AM 
{{ 1304375948024 | date:\"yyyy-MM-dd hh:mm:ss\" }}  //结果：2011-05-03 06:39:08

 4，number格式化

{{ 1.234567 | number:1 }}  //结果：1.2  
{{ 1234567 | number }}    //结果：1,234,567

 5，currency货币格式化

{{ 250 | currency }}         //结果：$250.00  
{{ 250 | currency:\"RMB ￥ \" }}    //结果：RMB ￥ 250.00

 6，filter查找 只能查value,不能查key

{{ [{\"age\": 20,\"id\": 10,\"name\": \"iphone\"}, 
{\"age\": 12,\"id\": 11,\"name\": \"sunm xing\"}, 
{\"age\": 44,\"id\": 12,\"name\": \"test abc\"} 
] | filter:\'s\'}}  //查找含有有s的行 
 
//上例结果：[{\"age\":12,\"id\":11,\"name\":\"sunm xing\"},{\"age\":44,\"id\":12,\"name\":\"test abc\"}] 
 
{{ [{\"age\": 20,\"id\": 10,\"name\": \"iphone\"}, 
{\"age\": 12,\"id\": 11,\"name\": \"sunm xing\"}, 
{\"age\": 44,\"id\": 12,\"name\": \"test abc\"} 
] | filter:{\'name\':\'ip\'} }}  //查找name like ip的行 
//上例结果:[{\"age\":20,\"id\":10,\"name\":\"iphone\"}] 
 
$filter(\'number\')(30000, 2); 
var jsonString = $filter(\'json\')({\"age\":12,\"id\":11,\"name\":\"sunm xing\"},{\"age\":44,\"id\":12,\"name\":\"test abc\"}])

 7，limitTo字符串，对像的截取

{{ \"i love tank\" | limitTo:6 }}      //结果：i love 
{{ \"i love tank\" | limitTo:-4 }}     //结果：tank 
 
{{ [{\"age\": 20,\"id\": 10,\"name\": \"iphone\"}, 
{\"age\": 12,\"id\": 11,\"name\": \"sunm xing\"}, 
{\"age\": 44,\"id\": 12,\"name\": \"test abc\"} 
] | limitTo:1 }}   //结果：[{\"age\":20,\"id\":10,\"name\":\"iphone\"}]

 8，orderBy对像排序

{{ [{\"age\": 20,\"id\": 10,\"name\": \"iphone\"}, 
{\"age\": 12,\"id\": 11,\"name\": \"sunm xing\"}, 
{\"age\": 44,\"id\": 12,\"name\": \"test abc\"} 
] | orderBy:\'id\':true }}    //根id降序排 
 
{{ [{\"age\": 20,\"id\": 10,\"name\": \"iphone\"}, 
{\"age\": 12,\"id\": 11,\"name\": \"sunm xing\"}, 
{\"age\": 44,\"id\": 12,\"name\": \"test abc\"} 
] | orderBy:\'id\' }}      //根据id升序排 
 
{{ [{\"age\": 20,\"id\": 10,\"name\": \"iphone\"}, 
{\"age\": 12,\"id\": 11,\"name\": \"sunm xing\"}, 
{\"age\": 44,\"id\": 12,\"name\": \"test abc\"} 
] | orderBy:[\'-age\',\'name\'] }}

二，自定filter功能
filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。

app.filter(\'过滤器名称\',function(){ 
  return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ 
    //...做一些事情  
    return 处理后的对象; 
  } 
});

我找了一个基本angularjs的mvc框架，phonecat，自定义filter也是在这基础写的，这个框架挺好用的。
filters.js添加一个module

angular.module(\'tanktest\', []).filter(\'tankreplace\', function() { 
  return function(input) { 
    return input.replace(/tank/, \"=====\") 
  }; 
});

html中调用

{{ \"TANK is GOOD\" | lowercase |tankreplace}}  //结果：===== is good

 注意：| lowercase |tankreplace管道命令可以有多个

yourApp.filter(\'orderObjectBy\', function() { 
 return function(items, field, reverse) { 
  var filtered = []; 
  angular.forEach(items, function(item) { 
   filtered.push(item); 
  }); 
  filtered.sort(function (a, b) { 
   return (a[field] > b[field] ? 1 : -1); 
  }); 
  if(reverse) filtered.reverse(); 
  return filtered; 
 }; 
});

该过滤器将对象转换成标准的数组并把它通过您指定字段排序。您可以使用orderObjectBy过滤器酷似ORDERBY，包括字段名后一个布尔值，以指定的顺序是否应该得到扭转。换句话说，假的是升序，真正的下降。html调用

<li ng-repeat=\"item in items | orderObjectBy:\'color\':true\">{{ item.color }}</li>

 
排序搜索

<input type=\"text\" ng-model=\"search\" class=\"form-control\" placeholder=\"Search\"> 
<thead> 
  <tr> 
    <!-- ng-class=\"{dropup:true}\" --> 
    <th ng-click=\"changeOrder(\'id\')\" ng-class=\"{dropup: order === \'\'}\"> 
      产品编号 
      <span ng-class=\"{orderColor: orderType === \'id\'}\" class=\"caret\"></span> 
    </th> 
    <th ng-click=\"changeOrder(\'name\')\" ng-class=\"{dropup: order === \'\'}\"> 
      产品名称 
      <span ng-class=\"{orderColor: orderType === \'name\'}\" class=\"caret\"></span> 
    </th> 
    <th ng-click=\"changeOrder(\'price\')\" ng-class=\"{dropup: order === \'\'}\"> 
      产品价格 
      <span ng-class=\"{orderColor: orderType === \'price\'}\" class=\"caret\"></span> 
    </th> 
  </tr> 
</thead> 
<tbody> 
  <tr ng-repeat=\"item in productData | filter: search | orderBy:order + orderType\"> 
    <td>{{item.id}}</td> 
    <td>{{item.name}}</td> 
    <td>{{item.price | currency: \'￥\'}}</td> 
  </tr> 
</tbody>

angularjs

//默认排序字段 
$scope.orderType = \'id\'; 
 
$scope.order = \'-\'; 
 
$scope.changeOrder = function(type) { 
  console.log(type); 
  $scope.orderType = type; 
 
  if ($scope.order === \'\') { 
    $scope.order = \'-\'; 
  }else{ 
    $scope.order = \'\'; 
  } 
}

本文地址：https://www.stayed.cn/item/1911

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案