码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS 过滤器(Filter) 详解

时间:2015-08-20 10:31:08      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:filter   angularjs   

过滤器(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的那个函数中,作为第二个参数,或者更多个参数也可以。

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

AngularJS 过滤器(Filter) 详解

标签:filter   angularjs   

原文地址:http://blog.csdn.net/chndata/article/details/47803629

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!