過濾器（filter）正如其名，作用就是接收一個輸入，通過某個規則進行處理，然后返回處理后的結果。主要用在數據的格式化上，例如獲取一個數組中的子集，對數組中的元素進行排序等。ng內置了一些過濾器，它們是：currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json對象)、limitTo(限制個數)、lowercase(小寫)、uppercase(大寫)、number(數字)、orderBy(排序)。總共九種。除此之外還可以自定義過濾器，這個就強大了，可以滿足任何要求的數據處理。
AngularJS中為我們提供了一些內置的過濾器，這里列舉一些自定義過濾器的場景。
自定義過濾器，不帶參數
//過濾 不帶參數app.filter('ordinal', function () {return function (number) {if (isNaN(number) || number < 1) {return number;} else {var lastDigit = number % 10;if (lastDigit === 1) {return number + 'st'} else if (lastDigit === 2) {return number + 'nd'} else if (lastDigit === 3) {return number + 'rd'} else if (lastDigit > 3) {return number + 'th'}}}});大致這樣使用：
{{777 | ordinal}}
過濾 帶參數
把某個位置上的字母轉換成大寫。
//過濾 帶參數app.filter('capitalize', function () {//input 需要過濾的元素//char位置，索引減一return function (input, char) {if (isNaN(input)) {//如果序號位置沒有設置，索引位置默認是0var char = char - 1 || 0;//把過濾元素索引位置上的字母轉換成大寫var letter = input.charAt(char).toUpperCase();var out = [];for (var i = 0; i < input.length; i++) {if (i == char) {out.push(letter);} else {out.push(input[i]);}}return out.join('');} else {return input;}}}); 大致這樣使用：
{{'seven' | capitalize:3}}
過濾集合
過濾出集合中滿足某種條件的元素。
var app = angular.module('filters', []);app.controller('demo', function ($scope) {$scope.languages = [{name: 'C#', type: 'static'},{name: 'PHP', type: 'dynamic'},{name: 'Go', type: 'static'},{name: 'JavaScript', type: 'dynamic'},{name: 'Rust', type: 'static'}];});//過濾集合app.filter('staticLanguage', function () {return function (input) {var out = [];angular.forEach(input, function (language) {if (language.type === 'static') {out.push(language);}});return out;}}); 大致這樣使用：
<li ng-repeat="lang in languages | staticLanguage">{{lang.name}}</li>過濾，帶多個參數，做多件事
定義數字的顯示單位和顯示位置。
var app = angular.module('filters', []);app.controller('demo', function ($scope) {$scope.digit = 29.88;});//過濾 做多件事 多個參賽app.filter('customCurrency', function () {return function (input, symbol, place) {if (isNaN(input)) {return input;} else {//檢查symbol是否有實參var symbol = symbol || '￥';var place = place === undefined ? true : place;if(place===true){return symbol+input;}else{return input + symbol;}}}}); 大致這樣使用：
<p><strong>Original:</strong></p><ul><li>{{digit}}</li></ul><p><strong>Custom Currency Filter</strong></p><ul><li>{{digit | customCurrency}} --Default</li><li>{{digit | customCurrency:'元'}} --custom symbol</li><li>{{digit | customCurrency:'元':false}} -- custom symbol and custom location</li></ul>filter的兩種使用方法
1. 在模板中使用filter
我們可以直接在{{}}中使用filter，跟在表達式后面用 | 分割，語法如下：
{{ expression | filter }}也可以多個filter連用，上一個filter的輸出將作為下一個filter的輸入（怪不得這貨長的跟管道一個樣。。）
{{ expression | filter1 | filter2 | ... }}filter可以接收參數，參數用 : 進行分割，如下：
{{ expression | filter:argument1:argument2:... }}除了對{{}}中的數據進行格式化，我們還可以在指令中使用filter，例如先對數組array進行過濾處理，然后再循環輸出：
<span ng-repeat="a in array | filter ">
2. 在controller和service中使用filter
我們的js代碼中也可以使用過濾器，方式就是我們熟悉的依賴注入，例如我要在controller中使用currency過濾器，只需將它注入到該controller中即可，代碼如下：
app.controller('testC',function($scope,currencyFilter){$scope.num = currencyFilter(123534); }在模板中使用{{num}}就可以直接輸出 $123,534.00了！在服務中使用filter也是同樣的道理。
此時你可能會有疑惑，如果我要在controller中使用多個filter，難道要一個一個注入嗎，這豈不太費勁了？小兄弟莫著急~ng提供了一個$filter服務可以來調用所需的filter，你只需注入一個$filter就夠了，使用方法如下：
app.controller('testC',function($scope,$filter){$scope.num = $filter('currency')(123534); $scope.date = $filter('date')(new Date()); }可以達到同樣的效果。好處是你可以方便使用不同的filter了。
新聞熱點
疑難解答
