網站鏈接：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filters/
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的表達式改變時）。
<div ng-controller=> <div><span ng-repeat=>`entry`.`name` </span> </div> <div><span ng-repeat=>`entry`.`name` </span> </div> </div>, [.array =.filteredArray = filterFilter(.array, : 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的常用用法。