AngularJS中的过滤器

欢迎大家指导与讨论 : ）

　　一、前言

　　AngularJS的过滤器能够将数据在被指令处理到显示在视图之前进行处理和转换。而且，过滤器不会修改作用域中的数据本身，即过滤器会保证数据的完整性。这样子能够允许同一份数据在应用中的不同部分以不同形式得以展示。

　   二、过滤单个数据

　　自定义的过滤器，如果是用来处理单项数据的话，过滤器的工厂函数所return的实例函数会带有两个参数，分别是value和reverse。value代表当前处理的该项数据的值，reverse用于运行过滤器被颠倒过来使用，当没有被定义时，则返回null给过滤函数

app.filter("myFilter", function(){
    return function(value, reverse){
        if(angular.isString(value){
             var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
　　　　　　　 return (reverse ? intermediate[0].toLowerCase() : intermediate[0].toUpperCase()) + intermediate.substr(1);
        })else{
             return value;
        }
    }
})

<li> {{ p.name | myFilter }} </li>
<li> {{ p.name | myFilter:true }} </li> //此处设置了reverse为true

　   三、过滤数据集合

　　自定义的过滤器，如果是用来处理数据集合的话，过滤器的工厂函数所return的实例函数会带有两个参数，分别是data和count。value代表当前处理的该项数据集合，count为某个数值，可以用于对集合进行特殊处理，当没有被定义时，则返回null给过滤函数

app.filter("myFilter", function(){
    return function(data, count){
       if(angular.isArray(data) && angular.isNumber(count){
           if(count > data.length || count < 1){
               return data;
           }else{
               return data.slice(count)
           }
      })else{
               return data;
      }
   }
})

<li ng-repeat="item in items | myFilter:2 "> 

　   四、filter合并

 　　当我们需要把多个的过滤器集合到一个过滤器身上时， 我们需要在工厂函数中的所reuturn的函数中加入对所需要过滤器的依赖，并对前面处理完的数据再继续下一个过滤器的处理

app.filter("filter1", function(){//...})
app.filter("filter2", function(){//...})

app.filter("CompleteFilter", function(){
     return function(value, filter1, filter2){
        var date = $filter("filter1")(value, count);
        return $filter("filter2").(date, othercount);
     }
})

<li ng-reapeat="item in items | CompleteFilter:2:5 "></li>

 

　　五、其他技巧

　　1. 替换货币符号  <li>{{ item.price | currency:"￥" }}</li>  

　　2. 指定小数点位数    <li>{{ item.price | number: 0 }}</li> 

　　3. 格式化日期  <li>{{ item.date| date: "dd MMMM yy" }}</li>  

        4. 指定集合的数量  <li ng-repeate="item in items | limitTo: 5 "> 

        5. 指定带有特定属性 <li ng-repeate="item in items | filter:{category: 'Fish'} "> 

　　 6. 反向排序  <li ng-repeate="item in items | orderBy: '-price' "> 

 

 

　　资料参考

　　《AngularJS高级程序设计》