AngularJS中的过滤器（filter）

AngularJS中的过滤器是用于对数据的格式化，或者筛选的函数，可以直接通过以下语法使用：

{{expression|filter1:param1,param2,...|filter2}

过滤器的种类有number，currency，date，json，limitTo，lowercase，uppercase，filter，orderBy。

 <!DOCTYPE html>
 <html ng-app="app"> 
 <head> 
     <meta charset="utf-8"> 
 </head> 
 <body ng-app="app"> 
     <div ng-controller="Controller1"> 
         <p>{{1234567890 | number}}</p> 
         <!--显示1,234,567,890--> 
         <p>{{1234.56789 | number:3}}</p> 
         <!--显示1,234.568，保留3位小数--> 
         <p>{{1234.56789 | currency}}</p> 
         <!--显示$1,234.57，货币，默认的前缀是美元符号--> 
         <p>{{1234.56789 | currency:'￥'}}</p> 
         <!--显示￥1,234.57--> 
         <p>{{today | date:'medium'}}</p> 
         <!--显示Jun 28, 2015 3:45:54 PM--> 
         <p>{{today | date:'short'}}</p> 
         <!--显示6/28/15 3:45 PM--> 
         <p>{{today | date:'fullDate'}}</p> 
         <!--显示Sunday, June 28, 2015--> 
         <p>{{today | date:'longDate'}}</p> 
         <!--显示June 28, 2015--> 
         <p>{{today | date:'shortDate'}}</p> 
         <!--显示6/28/15--> 
         <p>{{today | date:'shortTime'}}</p> 
         <!--显示3:45 PM--> 
         <p>{{today | date:'mediumTime'}}</p> 
         <!--显示3:45:54 PM--> 
         <p>{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p> 
         <!--显示2015-06-28 15:45:54--> 
         <p>{{['a','b','c','d','e'] | limitTo:3}}</p> 
         <!--显示["a","b","c"]，截取前3位--> 
         <p>{{['a','b','c','d','e'] | limitTo:-3}}</p> 
         <!--显示["c","d","e"]，截取后3位--> 
         <p>{{'Hello World' | lowercase}}</p> 
         <!--显示hello world--> 
         <p>{{'Hello World' | uppercase}}</p> 
         <!--显示HELLO WORLD--> 
         <p>{{data.phone | filter:'le'}}</p> 
         <!--显示[{"name":"iPhone","company":"Apple"}]，只匹配value值--> 
         <p>{{data.phone | filter:{company:'A'} }}</p> 
         <!--显示[{"name":"iPhone","company":"Apple"},{"name":"HUAWEI P8","company":"HUAWEI"}]，company中有A就会匹配到--> 
         <p>{{data.phone | orderBy:'name'}}</p> 
         <!--显示[{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"},{"name":"iPhone","company":"Apple"}]，以name的值做排序，默认是从小到大排序--> 
         <p>{{data.phone | orderBy:-'name'}}</p> 
         <!--显示[{"name":"iPhone","company":"Apple"},{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"}]，反序--> 
         <p>{{[2,24,13,89,3,8,41,9,10] | filter:checkNum}}</p> 
         <!--自定义的过滤器，显示[2,3,8,9,10]，定义见90~95行--> 
     </div> 
     <script src="../JS/angular.min.js"></script> 
     <script type="text/javascript"> 
     angular.module('app', []) 
         .controller('Controller1', function($scope, $filter) { 
             $scope.today = new Date; 
             $scope.data = { 
                 phone: [{ 
                     name: 'iPhone', 
                     company: 'Apple' 
                 }, { 
                     name: 'Galaxy S5', 
                     company: 'Sumsung' 
                 }, { 
                     name: 'HUAWEI P8', 
                     company: 'HUAWEI' 
                 }] 
             }; 
             var jsonString = $filter('json')($scope.data); 
             console.log(jsonString); 
             /* console输出json格式的data 
             { 
                 "phone": [ 
                   { 
                     "name": "iPhone", 
                     "company": "Apple" 
                   }, 
                   { 
                     "name": "Galaxy S5", 
                     "company": "Sumsung" 
                   }, 
                   { 
                     "name": "HUAWEI P8", 
                     "company": "HUAWEI" 
                   } 
                 ] 
             } 
             */ 
             //自定义过滤器 
             $scope.checkNum = function(num) { 
                 //>10的不保留 
                 if (num > 10) return false; 
                 else return true; 
             } 
         }); 
     </script> 
 </body> 
 </html> 

除了上面自定义过滤器的方法外，还有两种专门的方法。

第一种 module.filter(name,filterFactory)

第二种 @$filterProvider.register();

第一种的例子

 <!DOCTYPE html>
 <html ng-app="app"> 
 <head> 
     <meta charset="utf-8"> 
 </head> 
 <body ng-app="app"> 
     <div ng-controller="Controller1"> 
         <ul> 
             <!-- 循环输出data里面的数据，用自定义的名为filterAge的过滤器过滤 --> 
             <li ng-repeat="item in data | filterAge"> 
                 `item`.`name` `item`.`age` `item`.`position` 
             </li> 
         </ul> 
     </div> 
     <script src="../JS/angular.min.js"></script> 
     <script type="text/javascript"> 
     angular.module('app', [], function($provide) { 
             //service提供数据 
             $provide.service('data', function() { 
                 return [{ 
                     name: 'Wilshere', 
                     age: 23, 
                     position: 'midfield' 
                 }, { 
                     name: 'Giroud', 
                     age: 28, 
                     position: 'striker' 
                 }, { 
                     name: 'Cech', 
                     age: 33, 
                     position: 'goalkeeper' 
                 }]; 
             }); 
         }) 
         //用.filter的方法定义过滤器 
         .filter('filterAge', function() { 
             return function(obj) { 
                 //obj是过滤前的对象 
                 var newObj = []; 
                 angular.forEach(obj, function(i) { 
                     if (i.age > 25) { 
                         newObj.push(i); 
                     } 
                 }); 
                 return newObj; 
             } 
         }) 
         .controller('Controller1', function($scope, data) { 
             $scope.data = data; 
         }); 
     </script> 
 </body> 
 </html> 

第二种的例子

 <!DOCTYPE html>
 <html ng-app="app"> 
 <head> 
     <meta charset="utf-8"> 
 </head> 
 <body ng-app="app"> 
     <div ng-controller="Controller1"> 
         <ul> 
             <!-- 循环输出data里面的数据，用自定义的名为filterAge的过滤器过滤 --> 
             <li ng-repeat="item in data | filterAge"> 
                 `item`.`name` `item`.`age` `item`.`position` 
             </li> 
         </ul> 
     </div> 
     <script src="../JS/angular.min.js"></script> 
     <script type="text/javascript"> 
     angular.module('app', [], function($filterProvider, $provide) { 
             //用注册的方法自定义过滤器 
             $filterProvider.register('filterAge', function() { 
                 return function(obj) { 
                     var newObj = []; 
                     angular.forEach(obj, function(i) { 
                         //age大于25的才会输出 
                         if (i.age > 25) { 
                             newObj.push(i); 
                         } 
                     }); 
                     return newObj; 
                 } 
             }); 
             //service提供数据 
             $provide.service('data', function() { 
                 return [{ 
                     name: 'Wilshere', 
                     age: 23, 
                     position: 'midfield' 
                 }, { 
                     name: 'Giroud', 
                     age: 28, 
                     position: 'striker' 
                 }, { 
                     name: 'Cech', 
                     age: 33, 
                     position: 'goalkeeper' 
                 }]; 
             }); 
         }) 
         .controller('Controller1', function($scope, data) { 
             $scope.data = data; 
         }); 
     </script> 
 </body> 
 </html> 