Angularjs中使用Filters詳解

2019-11-20 10:24:34

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

Filter作用就是接收一個輸入，通過某個規(guī)則進行處理，然后給用戶返回處理后的結(jié)果。Filter可以用在模板、控制器、或者服務(wù)，同時也會很容易自定義一個Filter過濾器。

在模板中使用Filter

Filter可以用于在視圖模板中使用一下語法表達式：

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

Filter可以應(yīng)用到另一個過濾的結(jié)果中。這就是所謂的“chaining”，使用語法如下：

Filter中可能需要參數(shù)。語法為：

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

在controller、services、directives中使用filter

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

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

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

因此下面的例子直接調(diào)用在控制器中的filter。通過這個，控制器可以在需要是調(diào)用filter（例如：當后端數(shù)據(jù)加載時或者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');}]);

結(jié)果為：

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

創(chuàng)建自定義filters：

編寫自己的filter是非常簡單的：只需要在你的模塊中注冊一個新的filter factory函數(shù)。在內(nèi)部，這里用了filterProvider。這個factory函數(shù)應(yīng)該返回一個新的filter函數(shù)并且將輸入值作為第一個參數(shù)。任何過濾器參數(shù)都會作為附加參數(shù)傳遞到過濾器函數(shù)中。

這個過濾器函數(shù)應(yīng)該是一個單純的函數(shù)。這意味著它應(yīng)該stateless 和 idempotent。當輸入的函數(shù)變化時，angular依賴這些屬性并且執(zhí)行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);}]);

結(jié)果為：

No filter: helloReverse: ollehReverse + uppercase: OLLEHReverse, filtered in controller: olleh

有狀態(tài)的filters(Stateful filters)

強烈建議寫有狀態(tài)的filters，因為這些不能用angular進行優(yōu)化，這往往會導(dǎo)致性能問題。許多有狀態(tài)的filters轉(zhuǎn)換成無狀態(tài)的filters僅僅通過揭露隱藏的狀態(tài)作為model，并且將其轉(zhuǎn)化為一個filter參數(shù)。

然而，如果你需要寫一個有狀態(tài)的filters，你必須將filter標記為$stateful，這也就意味著它將在每一個$digest周期內(nèi)執(zhí)行一次或多次。

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: '*'});

結(jié)果為：