詳解AngularJS中自訂過濾器_AngularJS

過濾器（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了。