AngularJs功能（五）--过滤器

过滤器 Filter

过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上。

过滤器通常是伴随标记来使用的，将你model中的数据格式化为需要的格式。

表单的控制功能主要涉及到数据验证以及表单控件的增强。关于表单控件会单独模块做讲解。

内置过滤器

先说angular自带的几种过滤器

1.currency (货币处理)
使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如我传入人民币：

{{num | currency : '￥'}}

2.date (日期格式化)
原生的js对日期的格式化能力有限，angular提供的date过滤器基本可以满足一般的格式化要求。用法如下：

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}} date格式可设定

　　参数用来指定所要的格式， y年 M月 d日 h时 m分 s秒 E星期，你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。

3.filter(匹配字符串)
这个filter用来处理一个数组，然后可以过滤出含有某个字符串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义过滤元素的匹配规则。
例子如下：

$scope.demandArray = [
  {name:'lmc',age:23},{name:'lzx',age:24},{name:'lxy',{name:'lyj',age:26},{name:'fll',age:25}
];
$scope.func = function(e){return e.age>24;};

{{ demandArray | filter : 'a' }} //匹配属性值中含有a的
{{ demandArray | filter : 4 }} //匹配属性值中含有4的
{{ demandArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的
{{ demandArray | filter : func }} //参数是函数，指定返回age>4的

4.json(格式化json对象)
json过滤器可以把一个js对象格式化为json字符串，没有参数。这东西有什么用呢，我一般也不会在页面上输出一个json串啊，官网说它 可以用来进行调试，或者，也可以用在js中使用，作用就和我们熟悉的JSON.stringify()一样。用法超级简单：

{{ jsonTest | json}}

5.limitTo(限制数组长度或字符串长度)
limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度，如果参数是负值，则从数组尾部开始截取。注意这个filter只能从数组或字符串的开头/尾部进行截取。
用处不是很大。。完全可以用js来完成。

{{ childrenArray | limitTo : 2 }} //将会显示数组中的前两项

6.lowercase(小写)
把数据转化为全部小写。没有参数，只能把整个字符串变为小写，不能指定字母。

7.uppercase(大写)
把数据转化为全部大写。没有参数，只能把整个字符串变为小写，不能指定字母。

8.number(格式化数字)
number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定float类型保留几位小数：

{{ num | number : 2 }}

9.orderBy(排序)
orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是 一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较），还是拿上面的孩子数组举例：

<div>{{ demandArray | orderBy : 'age' }}</div> //按age属性值进行排序，若是-age，则倒序
<div>{{ demandArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序
<div>{{ demandArray | orderBy : ['age','name'] }}</div> //如果age相同，按照name进行排序

自定义过滤器

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

下面看一个给数字加百分比的一个自定义filter：

angular.module("MetronicApp").filter("numberToRMB",["$filter",function($filter) {
  return function (value) {
    var filter = $filter("currency");
    return filter(value,"￥");
  }
}])

格式就是这样，你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数，参数就定义在return的那个函数中，作为第二个参数，或者更多个参数也可以。

更多自定义filter会在项目中详细讲解。

使用方法

1.在模板中使用filter

我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下：

{{ expression | filter }}

也可以多个filter连用，上一个filter的输出将作为下一个filter的输入：

{{ expression | filter1 | filter2 | ... }}　　

filter可以接收参数，参数用 : 进行分割，如下：

{{ expression | filter:argument1:argument2:... }}　　

除了对

{{}}

中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：

<span ng-repeat="a in array | filter ">　

2.在controller和service中使用filter

　　我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，代码如下：

app.controller('testC',function($scope,currencyFilter){
  $scope.num = currencyFilter(123534);  
}　　

在模板中使用{{num}}就可以直接输出$123,534.00了。

在服务中使用filter也是同样的道理。

如果你要在controller中使用多个filter，并不需要一个一个注入，angular提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了，使用方法如下：

app.controller('testC',$filter){
  $scope.num = $filter('currency')(123534);　　
  $scope.date = $filter('date')(new Date());  
}　　

可以达到同样的效果。好处是你可以方便使用不同的filter了。

项目中会对使用到的filter做详细讲解。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!