Angularjs中使用Filters詳解_AngularJS

Filter作用就是接收一個輸入，透過某個規則處理，然後傳回給使用者處理後的結果。 Filter可以用在模板、控制器、或服務，同時也會很容易自訂一個Filter過濾器。

在模板中使用Filter

Filter可以用來在視圖範本中使用一下語法運算式：

{{ expression | filter }}

例如：格式{{ 12 | currency }}是使用currency的filter用法，讓數字12過濾為貨幣形式，結果是$12.00。

Filter可以套用到另一個過濾的結果。這就是所謂的“chaining”，使用語法如下：

{{ expression | filter1 | filter2 | ... }}

Filter中可能需要參數。語法為：

{{ expression | filter:argument1:argument2:... }}

例如：格式{{ 1234 | number:2 }}是使用number的filter用法，將數字1234過濾為有兩位數小數點的數字，結果為：1,234.00 。

在controller、services、directives中使用filter

 你可以在controller、services、directives中使用filter。

為此，你需要將依賴項名稱注入到你的controller/service/directive中：filter；例如：一個過濾器是number，你就需要透過使用依賴注入numberFilter。注入的參數是一個函數，該函數將值作為第一個參數，然後用第二個參數來篩選參數。

下面的範例使用了叫做filter的Filter過濾器。這個filter可以在sub arrays的基礎上減少arrays。也可以應用在視圖模板的標記，就像：{{ctrl.array|filter:'a'}}，這將為‘a'做一個全文搜尋。然而，在視圖模板中使用filter將會重新對每一個filter過濾，如果數組比較大的會是載入多次的。

因此下面的範例直接呼叫在控制器中的filter。透過這個，控制器可以在需要是呼叫filter（例如：當後端資料載入時或filter的表達式改變時）。

index.html:

<div ng-controller="FilterController as ctrl">
 <div>
  All entries:
  <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
 </div>
 <div>
  Entries that contain an "a":
  <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
 </div>
</div>
 

script.js:

angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function(filterFilter) {
 this.array = [
  {name: 'Tobias'},
  {name: 'Jeff'},
  {name: 'Brian'},
  {name: 'Igor'},
  {name: 'James'},
  {name: 'Brad'}
 ];
 this.filteredArray = filterFilter(this.array, 'a');
}]);

結果為：

All entries: Tobias Jeff Brian Igor James Brad
Entries that contain an "a": Tobias Brian James Brad

建立自訂filters：

寫自己的filter是非常簡單的：只需要在你的模組中註冊一個新的filter factory函數。在內部，這裡用了filterProvider。這個factory函數應該會傳回一個新的filter函數並且將輸入值作為第一個參數。任何過濾器參數都會作為附加參數傳遞到過濾器函數中。

這個濾波器函數應該是一個單純的函數。這意味著它應該stateless 和 idempotent。當輸入的函數變化時，angular依賴這些屬性並且執行filter。

注意：filter的名稱必須是有效的angular表達式識別碼。例如uppercase或orderBy。名字是不允許有特殊的字符，如連字符和點是不允許的。如果你希望你的濾鏡有名稱空間，那麼你可以使用大寫（myappSubsectionFilterx）或底線（myapp_subsection_filterx）。

下面的範例filter是反寫一個字串。另外，它可以再加一個條件使字串大寫。

index.html

<div ng-controller="MyController">
 <input ng-model="greeting" type="text"><br>
 No filter: {{greeting}}<br>
 Reverse: {{greeting|reverse}}<br>
 Reverse + uppercase: {{greeting|reverse:true}}<br>
 Reverse, filtered in controller: {{filteredGreeting}}<br>
</div>
 

script.js

angular.module('myReverseFilterApp', [])
.filter('reverse', function() {
 return function(input, uppercase) {
  input = input || '';
  var out = "";
  for (var i = 0; i < input.length; i++) {
   out = input.charAt(i) + out;
  }
  // conditional based on optional argument
  if (uppercase) {
   out = out.toUpperCase();
  }
  return out;
 };
})
.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
 $scope.greeting = 'hello';
 $scope.filteredGreeting = reverseFilter($scope.greeting);
}]);

結果為：

No filter: hello
Reverse: olleh
Reverse + uppercase: OLLEH
Reverse, filtered in controller: olleh

有狀態的filters(Stateful filters)

強烈建議寫有狀態的filters，因為這些不能用angular進行最佳化，這往往會導致效能問題。許多有狀態的filters轉換成無狀態的filters僅僅透過揭露隱藏的狀態作為model，並且將其轉換為一個filter參數。

然而，如果你需要寫一個有狀態的filters，你必須將filter標記為$stateful，這也意味著它將在每一個$digest週期內執行一次或多次。

index,html

<div ng-controller="MyController">
 Input: <input ng-model="greeting" type="text"><br>
 Decoration: <input ng-model="decoration.symbol" type="text"><br>
 No filter: {{greeting}}<br>
 Decorated: {{greeting | decorate}}<br>
</div>
 

script.js:

angular.module('myStatefulFilterApp', [])
.filter('decorate', ['decoration', function(decoration) {

 function decorateFilter(input) {
  return decoration.symbol + input + decoration.symbol;
 }
 decorateFilter.$stateful = true;

 return decorateFilter;
}])
.controller('MyController', ['$scope', 'decoration', function($scope, decoration) {
 $scope.greeting = 'hello';
 $scope.decoration = decoration;
}])
.value('decoration', {symbol: '*'});

結果為：

No filter: hello
Decorated: *hello*

下次會寫一篇angularjs中filter的常用用法。