过滤器(Filter),故名思议,源数据通过特定的规则,转换成需要的数据格式, 这个规则,我们统称为过滤器。
AngularJs 的Filter 功能非常强大,并且使用方便。它能够使得页面分组,查询,排序,以及数据转换等操作变的异常简单,同时还可以自定义过滤器实现更复杂的功能。
格式:{{expression | filter}} 或 {{expression | filter1 | filter2 | filter3......}} 或者 {{ expression | filter:argument1:argument2:... }}
常用内置Filter :
- currency: 货币符号格式化,默认是美元符号$,可以自定义人民币符号¥等, 用法如下:
{{100 | currency:'¥'}}
- uppercase/lowercase 字符串大写/小写转换
<span style="font-size: 10px;">{{"Angularjs" | uppercase}}</span>
输出 ANGULARJS
- data: 日起格式化
{{date | date : 'yyyy-MM-dd hh:mm:ss'}}
- limitTo 限制数组或字符串长度
{{ array | limitTo : 2 }}
上面例子是输出数组的前两个元素
{{ "Angularjs" | limitTo : 2 }}
输出字符前两位,An
- number 数字格式化
{{ "123.45678"| number : 2 }}
输出到小数点后两位: 123.45
- orderBy: 将数组元素按照指定的元素进行排序,同时可以指定按照升序或者降序排序,若不指定,默认为升序排序。
<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的那个函数中,作为第二个参数,或者更多个参数也可以。