AngularJS中的過濾器（filter）

??AngularJS中的過濾器是用于對數據的格式化，或者篩選的函數，可以直接通過以下語法使用：

? {{expression|filter}}

? {{expression|filter1|filter2}}

? {{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> 