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

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

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

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

常用内置Filter :

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

[html] view
plaincopy

1. {{100 | currency:‘￥‘}}

输出
100￥

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

[html] view
plaincopy

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

输出 ANGULARJS

• data: 日起格式化

[html] view
plaincopy

1. {{date | date : ‘yyyy-MM-dd hh:mm:ss‘}}

• limitTo 限制数组或字符串长度

[html] view
plaincopy

1. {{ array | limitTo : 2 }}

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

[html] view
plaincopy

1. {{ "Angularjs" | limitTo : 2 }}

输出字符前两位，An

• number 数字格式化

[html] view
plaincopy

1. {{ "123.45678"| number : 2 }}

输出到小数点后两位： 123.45

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

[html] view
plaincopy

1. <ui ng-repeat="person in persons | orderBy:name">
2. <li>{{person.name}}</li>
3. <li>{{person.age}}</li>
4. </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的那个函数中，作为第二个参数，或者更多个参数也可以。

版权声明：本文为博主原创文章，未经博主允许不得转载。