AngularJS 从入门到精通（过滤器(Filter) ）

过滤器（Filter），故名思议，源数据通过特定的规则，转换成需要的数据格式， 这个规则，我们统称为过滤器。

AngularJs 的Filter 功能非常强大，并且使用方便。它能够使得页面分组，查询，排序，以及数据转换等操作变的异常简单，同时还可以自定义过滤器实现更复杂的功能。

格式：{{expression | filter}} 或 {{expression | filter1 | filter2 | filter3......}} 或者 {{ expression | filter:argument1:argument2:... }}

常用内置Filter :

currency： 货币符号格式化，默认是美元符号$,可以自定义人民币符号￥等， 用法如下:

[html] view
plaincopy

{{100 | currency:'￥'}}

输出
100￥

uppercase/lowercase 字符串大写/小写转换

[html] view
plaincopy

<span style="font-size: 10px;">{{"Angularjs" | uppercase}}</span>

输出 ANGULARJS

data: 日起格式化

[html] view
plaincopy

{{date | date : 'yyyy-MM-dd hh:mm:ss'}}

limitTo 限制数组或字符串长度

[html] view
plaincopy

{{ array | limitTo : 2 }}

上面例子是输出数组的前两个元素

[html] view
plaincopy

{{ "Angularjs" | limitTo : 2 }}

输出字符前两位，An

number 数字格式化

[html] view
plaincopy

{{ "123.45678"| number : 2 }}

输出到小数点后两位： 123.45

orderBy： 将数组元素按照指定的元素进行排序，同时可以指定按照升序或者降序排序,若不指定，默认为升序排序。

[html] view
plaincopy

<ui ng-repeat="person in persons | orderBy:name">

<li>{{person.name}}</li>

<li>{{person.age}}</li>

</ui>

其中通过修改在参数前加- 可以按降序排列， 如下：

orderBy:'-name'

filter

自定义Filter:

filter的自定义方式使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。下面例子是定义一个过滤器，它可以返回一个数组中下标为奇数的元素，代码如下：

app.filter('odditems',function(){
return function(inputArray){
var array = [];
for(var i=0;i<inputArray.length;i++){
if(i%2!==0){
array.push(inputArray[i]);
}
}
return array;
}
});

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