AngularJS中的過濾器filter用法完全解析_AngularJS

在AngularJS的世界裡，filter提供了一種格式化資料的方法，Angular也提供給我們了很多內建的過濾器，並且建立自訂過濾器也是相當的簡單

在HTML的模板綁定{{}}中，我們使用 | 來調用過濾器，比如，我們想讓字串全部大寫字元顯示：

{{ name | uppercase }}

當然了，我們也可以在JavaScript中使用$filter服務來調用過濾器，還拿字串大寫來舉例：

app.controller('DemoController', ['$scope', '$filter',  function($scope, $filter) {   $scope.name = $filter('lowercase')('Ari');}]);

如何傳遞參數到filter呢？只需要把參數放在filter之後，中間加個冒號（如果有多個參數要傳遞，在每個參數後加上冒號）比如，數字過濾器可以協助我們限制數位位元，如果想顯示兩位小數，加上number:2就可以了

{{ 123.456789 | number:2 }}

filter過濾器主要用來過濾一個數組資料並返回一個包含子數組資料的新數組。

比如，在用戶端搜尋時，我們可以快速的從數組中過濾出我們想要的結果。

這個filter方法接收一個string，object，或者function參數用來選擇/移除數組元素。

下滿我們具體來看：

一，內建的過濾器
1，uppercase，lowercase大小轉換

{{ "lower cap string" | uppercase }}   //結果：LOWER CAP STRING {{ "TANK is GOOD" | lowercase }}     //結果：tank is good 

 ｜這裡的豎線是一種管道功能，如果對linux比較熟悉的話，這塊的｜根linux的管道功能，基本是一樣的2，json格式化

{{ {foo: "bar", baz: 23} | json }}  //結果：{ "foo": "bar", "baz": 23 } 

注意：bza沒格式前是沒有雙引號的，格式化後就轉換成了json資料了。

3，date格式化

mysql時間戳記 ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"  

{{ 1304375948024 | date:'medium'}}   //May 03, 2011 06:39:08 PM {{ 1304375948024 | date }}             //結果：May 3, 2011 {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}   //結果：05/03/2011 @ 6:39AM {{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}  //結果：2011-05-03 06:39:08 

 4，number格式化

{{ 1.234567 | number:1 }}  //結果：1.2  {{ 1234567 | number }}    //結果：1,234,567  

 5，currency貨幣格式化

{{ 250 | currency }}         //結果：$250.00  {{ 250 | currency:"RMB ￥ " }}    //結果：RMB ￥ 250.00  

 6，filter尋找 只能查value,不能查key

{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:'s'}}  //尋找含有有s的行  //上例結果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]  {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'ip'} }}  //尋找name like ip的行 //上例結果:[{"age":20,"id":10,"name":"iphone"}]  $filter('number')(30000, 2); var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]) 

 7，limitTo字串，對像的截取

{{ "i love tank" | limitTo:6 }}      //結果：i love {{ "i love tank" | limitTo:-4 }}     //結果：tank  {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | limitTo:1 }}   //結果：[{"age":20,"id":10,"name":"iphone"}] 

 8，orderBy對像排序

{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }}    //根id降序排  {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }}      //根據id升序排  {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:['-age','name'] }} 

二，自定filter功能
filter的自訂方式也很簡單，使用module的filter方法，返回一個函數，該函數接收輸入值，並返回處理後的結果。

app.filter('過濾器名稱',function(){   return function(需要過濾的對象,過濾器參數1,過濾器參數2,...){     //...做一些事情      return 處理後的對象;   } });  

我找了一個基本angularjs的mvc架構，phonecat，自訂filter也是在這基礎寫的，這個架構挺好用的。
filters.js添加一個module

angular.module('tanktest', []).filter('tankreplace', function() {   return function(input) {     return input.replace(/tank/, "=====")   }; }); 

html中調用

{{ "TANK is GOOD" | lowercase |tankreplace}}  //結果：===== is good 

 注意：| lowercase |tankreplace管道命令可以有多個

yourApp.filter('orderObjectBy', function() {  return function(items, field, reverse) {   var filtered = [];   angular.forEach(items, function(item) {    filtered.push(item);   });   filtered.sort(function (a, b) {    return (a[field] > b[field] ? 1 : -1);   });   if(reverse) filtered.reverse();   return filtered;  }; }); 

該過濾器將對象轉換成標準的數組並把它通過您指定欄位排序。您可以使用orderObjectBy過濾器酷似ORDERBY，包括欄位名後一個布爾值，以指定的順序是否應該得到扭轉。換句話說，假的是升序，真正的下降。html調用

<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li> 

 
排序搜尋

<input type="text" ng-model="search" class="form-control" placeholder="Search"> <thead>   <tr>     <!-- ng-class="{dropup:true}" -->     <th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}">       產品編號       <span ng-class="{orderColor: orderType === 'id'}" class="caret"></span>     </th>     <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}">       產品名稱       <span ng-class="{orderColor: orderType === 'name'}" class="caret"></span>     </th>     <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}">       產品價格       <span ng-class="{orderColor: orderType === 'price'}" class="caret"></span>     </th>   </tr> </thead> <tbody>   <tr ng-repeat="item in productData | filter: search | orderBy:order + orderType">     <td>{{item.id}}</td>     <td>{{item.name}}</td>     <td>{{item.price | currency: '￥'}}</td>   </tr> </tbody> 

angularjs

//預設排序欄位 $scope.orderType = 'id';  $scope.order = '-';  $scope.changeOrder = function(type) {   console.log(type);   $scope.orderType = type;    if ($scope.order === '') {     $scope.order = '-';   }else{     $scope.order = '';   } }