详解AngularJs过滤器--filter

Filter作用就是接收一个输入，通过某个规则进行处理，然后给用户返回处理后的结果。AngularJs内置9种过滤器，开发者也可以自定义过滤器。

一、AngularJs 9种内置过滤器

1、filter：选择数组的子集，并且返回一个新的数组.（Selects a subset（子集） of items from array and returns it as a new array）.
形式：{{ filter_expression | filter : expression : comparator(可选) : anyPropertyKey(可选)}}

$scope.arr = [{name:'John',phone:'555-1276'},{name:'Mary',phone:'800-BIG-MARY'},{name:'Mike',phone:'555-4321'},{name:'Adam',phone:'555-5678'},{name:'Julie',phone:'555-8765'},{name:'Juliette',phone:'555-5678'}];

{{arr | filter:'o'}}  //    [{name:"John",phone:"555-1276"}]
{{arr | filter:'N'}}  //    [{name:'John',phone:'555-1276'}]

2、currency：将数字格式化为货币格式.
形式：{{ currency_expression | currency : symbol(可选) : fractionSize(可选)}}

{{ 12 | currency }}         //    $ 12.00
{{ 12 | currency:'￥' }}    //    ￥12.00
{{ 12 | currency:'￥':1}}   //    ￥12.0

3、number：为一个数字加上千位分割，类似123,456,789。
形式：{{ number_expression | number : fractionSize(可选)}}

{{1223354 | number}}      //    1,223,354
{{1223354 | number:3}}    //    1,354.000

4、date：日期格式化.
形式：{{ date_expression | date : format(可选) : timezone(可选)}}

{{1494404020763 | date}}                 //    May 10,2017
{{1494404020763 | date:'dd/MM-yyyy'}}    //    10/05-2017

5、json：js对象转换为json字符串.
形式：{{ json_expression | json : spacing(可选)}}

<pre>{{ {'name':'value'} | json }}</pre>    
//用<pre>标签才能看到json字符串格式

6、lowercase：将字符串格式化为小写.
形式：{{ lowercase_expression | lowercase}}

{{ 'lastName' | uppercase }}    //    lastname

7、uppercase：将字符串格式化为大写
形式：{{ uppercase_expression | uppercase}}

8、limitTo：限制数组长度或字符串长度
形式：{{ limitTo_expression | limitTo : limit : begin(可选)}}

$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.letters = "abcdefghi";
$scope.longNumber = 2345432342;

{{ numbers | limitTo:3 }}        //    [1,3]
{{ letters | limitTo:4 }}        //    abcd
{{ longNumber | limitTo:5 }}     //    23454

9、orderBy：排序
形式：{{ orderBy_expression | orderBy : expression(可选) : reverse(可选) : comparator(可选)}}
注：orderBy过滤器接收一个expression来指定排序规则，可以是一个字符串，表示以该属性名称进行排序；可以是一个函数，按照函数的返回值排序；还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）

$scope.arr = [{name:'John',phone:'555-5678'}];

{{ arr | orderBy:'phone' }}    //按照phone属性值排列，若'-phone'，则倒序
//[{"name":"John","phone":"555-1276"},{"name":"Mike","phone":"555-4321"},{"name":"Adam","phone":"555-5678"},{"name":"Juliette",{"name":"Julie","phone":"555-8765"},{"name":"Mary","phone":"800-BIG-MARY"}]

{{ arr | orderBy:'phone':true }}    //reverse属性设置为true，则按照phone属性值倒序排列

二、视图模板中Filter的3种语法

{{ expression | filter }}    //第1种

{{ expression | filter1 | filter2 | filter3 }}    //第2种：filtera的过滤结果可以应用到filterb中。

{{ expression | filter:argument1:argument2:argument3 }}    //第3种：filter可以有多个参数。

三、自定义Filter

自定义filter规范：filter的名称必须是有效的angular表达式标识符，如uppercase/orderBy。filter名字不允许特殊字符，如连字符和点是不允许的，可以使用大写（appSubsectionFilter）或者下划线（app_subsection_filter）。
方法：使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。

angular.module('myApp',[]).filter('reverse',[function(){
        return function(text){//返回一个新的filter函数，这个filter函数将输入值作为第一个参数，第2、3..个参数就是过滤属性.
            return text.split('').reverse().join('');
        }
    }])

{{ 'google' | reverse }}    //    elgoog

参考：
http://www.cnblogs.com/lvdaba...
http://www.runoob.com/angular...
https://docs.angularjs.org/gu...
http://www.aspzz.cn/article/8...

（编辑：李大同）

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