本文給大家總結(jié)了下在Angularjs的模板、控制器、或者服務(wù)中使用Filters的方法，有需要的小伙伴可以參考下
Filter作用就是接收一個(gè)輸入，通過(guò)某個(gè)規(guī)則進(jìn)行處理，然后給用戶返回處理后的結(jié)果。Filter可以用在模板、控制器、或者服務(wù)，同時(shí)也會(huì)很容易自定義一個(gè)Filter過(guò)濾器。
在模板中使用Filter
Filter可以用于在視圖模板中使用一下語(yǔ)法表達(dá)式：
{{ expression | filter }}
例如：格式{{ 12 | currency }}是使用currency的filter用法，讓數(shù)字12過(guò)濾為貨幣形式，結(jié)果是$12.00。
Filter可以應(yīng)用到另一個(gè)過(guò)濾的結(jié)果中。這就是所謂的“chaining”，使用語(yǔ)法如下：
{{ expression | filter1 | filter2 | ... }}
Filter中可能需要參數(shù)。語(yǔ)法為：
{{ expression | filter:argument1:argument2:... }}
例如：格式{{ 1234 | number:2 }}是使用number的filter用法，將數(shù)字1234過(guò)濾為有兩位小數(shù)點(diǎn)的數(shù)字，結(jié)果為：1,234.00 。
在controller、services、directives中使用filter
你可以在controller、services、directives中使用filter。
為此，你需要將依賴項(xiàng)名稱注入到你的controller/service/directive中：filter；例如：一個(gè)過(guò)濾器是number，你就需要通過(guò)使用依賴注入numberFilter。注入的參數(shù)是一個(gè)函數(shù)，該函數(shù)將值作為第一個(gè)參數(shù)，然后用第二個(gè)參數(shù)來(lái)篩選參數(shù)。
下面的例子使用了叫做filter的Filter過(guò)濾器。這個(gè)filter可以在sub arrays的基礎(chǔ)上減少arrays。也可以應(yīng)用在視圖模板的標(biāo)記，就像：{{ctrl.array|filter:'a'}}，這將為‘a(chǎn)'做一個(gè)全文搜索。然而，在視圖模板中使用filter將會(huì)重新對(duì)每一個(gè)filter過(guò)濾，如果數(shù)組比較大的會(huì)是加載多次的。
因此下面的例子直接調(diào)用在控制器中的filter。通過(guò)這個(gè)，控制器可以在需要是調(diào)用filter（例如：當(dāng)后端數(shù)據(jù)加載時(shí)或者filter的表達(dá)式改變時(shí)）。
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 Brad
Entries that contain an "a": Tobias Brian James Brad
創(chuàng)建自定義filters：
編寫(xiě)自己的filter是非常簡(jiǎn)單的：只需要在你的模塊中注冊(cè)一個(gè)新的filter factory函數(shù)。在內(nèi)部，這里用了filterProvider。這個(gè)factory函數(shù)應(yīng)該返回一個(gè)新的filter函數(shù)并且將輸入值作為第一個(gè)參數(shù)。任何過(guò)濾器參數(shù)都會(huì)作為附加參數(shù)傳遞到過(guò)濾器函數(shù)中。
這個(gè)過(guò)濾器函數(shù)應(yīng)該是一個(gè)單純的函數(shù)。這意味著它應(yīng)該stateless 和 idempotent。當(dāng)輸入的函數(shù)變化時(shí)，angular依賴這些屬性并且執(zhí)行filter。
注意：filter的名稱必須是有效的angular表達(dá)式標(biāo)識(shí)符。例如uppercase或者orderBy。名字是不允許有特殊的字符，如連字符和點(diǎn)是不允許的。如果你希望你的過(guò)濾器有名稱空間，那么你可以使用大寫(xiě)（myappSubsectionFilterx）或者下劃線（myapp_subsection_filterx）。
下面的示例filter是反寫(xiě)一個(gè)字符串。另外，它可以再加一個(gè)條件使字符串大寫(xiě)。
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: hello
Reverse: olleh
Reverse + uppercase: OLLEH
Reverse, filtered in controller: olleh
有狀態(tài)的filters(Stateful filters)
強(qiáng)烈建議寫(xiě)有狀態(tài)的filters，因?yàn)檫@些不能用angular進(jìn)行優(yōu)化，這往往會(huì)導(dǎo)致性能問(wèn)題。許多有狀態(tài)的filters轉(zhuǎn)換成無(wú)狀態(tài)的filters僅僅通過(guò)揭露隱藏的狀態(tài)作為model，并且將其轉(zhuǎn)化為一個(gè)filter參數(shù)。
然而，如果你需要寫(xiě)一個(gè)有狀態(tài)的filters，你必須將filter標(biāo)記為$stateful，這也就意味著它將在每一個(gè)$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é)果為：
No filter: hello
Decorated: *hello*
下次會(huì)寫(xiě)一篇angularjs中filter的常用用法。
版權(quán)所有:易賢網(wǎng)
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試