详解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,223,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,2,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-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 | orderBy:'phone' }}    //按照phone属性值排列,若'-phone',则倒序
//[{"name":"John","phone":"555-1276"},
   {"name":"Mike","phone":"555-4321"},
   {"name":"Adam","phone":"555-5678"},
   {"name":"Juliette","phone":"555-5678"},
   {"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.jb51.net/article/8…

    原文作者:Lqshiluo
    原文地址: https://segmentfault.com/a/1190000009367372
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞