前言

本節我們來講講AngularJS中主要的部分之一，那就是過濾器，當從後臺獲取到的資料呈現到檢視上時，此時可能需要對資料進行相應的轉換，此時我們可以透過過濾器在不同頁面進行不同資料的格式抓換，在AngularJS中有常見預設的過濾器，當然若不滿足所需，我們可以自定義過濾器。

AngularJS預設過濾器

列舉AngularJS中常見的過濾器，如下：

預設過濾器示例

我們渲染一個產品列表並將產品名稱轉換為大寫，產品類別小寫，以及數量保留兩位小數等。

UI

      
          
              
                  產品個數                  {{products.length}}              
          
          
                                                                                                                                                                                                                                                                                                                                                                                                                                                                
名稱
類別
供給日期
數量
價格
{{p.name | uppercase}}
{{p.category | lowercase}}
{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}
{{p.quantity | number:2 }}
{{p.price | currency}}
          
      
  

JS

app.controller('FilterCtrl', function ($scope) {      $scope.products = [                      { name: "Sony LED", category: "TV", price: 40000, quantity:10, expiry: 30 },                      { name: "Vivo xplay5", category: "Mobile", price: 35640, quantity: 08, expiry: 21 },                      { name: "LeTv", category: "TV", price: 36000, quantity: 5, expiry: 50 },                      { name: "Iphone 6 plus", category: "Mobile", price: 55000, quantity: 6, expiry: 60 },                      { name: "Galaxy s7 edge", category: "Mobile", price: 45000, quantity: 15, expiry: 50 },      ];        $scope.getExpiryDate = function (days) {          var now = new Date();          return now.setDate(now.getDate() + days);      }    });

最後生成如下：

自定義過濾器示例 

AngularJS不僅僅支援內部自構建的過濾器，而且還可以自定義過濾器來滿足我們所需，若自定義過濾器此時我們需要 透過module.filter來實現，實際上內部是透過FilterProvider來實現。module.filter這個方法有兩個引數，一個是需要建立的過濾器的名稱，另外一個是建立一個factory函式來使得該自定義過濾器生效或者工作。

接下來我們實現一個自定義過濾器，該過濾器帶一個引數，實現了再對照程式碼就明朗了。如下：

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

接下來在檢視中將繫結的名稱和類別修改成如下：

 {{p.name | properCase}}   {{p.category | properCase : false}}

結果如下：

混合過濾器示例 

當進行渲染資料時，有可能需要進行多次過濾此時我們就需要建立多個自定義過濾器或者內建過濾器和自定義過濾器混合使用。

我們首先對列表透過name來orderby一下，然後透過自定義過濾器移除前兩條資料。

app.filter("skipRec", function () {      return function (data, count) {          if (angular.isArray(data) && angular.isNumber(count)) {              if (count > data.length || count 
此時檢視頁面迴圈列表時我們將修改成如下：
    ....... 
最終我們得到的結果如下：

總結
本節我們學習了AngularJS的過濾器，然後對預設過濾器、自定義過濾器以及混合過濾器統一進了相應的示例說明來加深理解，我們下節再見。