過濾器(filter)的作用就是接收一個(gè)輸入谓媒,通過某個(gè)規(guī)則進(jìn)行處理,然后返回處理后的結(jié)果何乎。主要用在數(shù)據(jù)的格式化上句惯。
filter的兩種使用方法
1. 在模板中使用filter
a). 我們可以直接在表達(dá)式中使用filter,跟在表達(dá)式后面用 | 分割支救,語法如下:
{{ expression | filter }}
b). 也可以多個(gè)filter連用抢野,上一個(gè)filter的輸出將作為下一個(gè)filter的輸入
{{ expression | filter1 | filter2 | ... }}
c). filter可以接收參數(shù),參數(shù)用 : 進(jìn)行分割
{{ expression | filter:argument1:argument2:... }}
d). 在指令中使用filter
<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);
}
此時(shí)你可能會(huì)有疑惑恃轩,如果我要在controller中使用多個(gè)filter,難道要一個(gè)一個(gè)注入嗎黎做,這豈不太費(fèi)勁了叉跛?ng提供了一個(gè)$filter服務(wù)可以來調(diào)用所需的filter,你只需注入一個(gè)$filter就夠了蒸殿,使用方法如下:
app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date());
}
ng的9種內(nèi)置過濾器
1. Currency(貨幣處理)
使用currency可以將數(shù)字格式化為貨幣筷厘,默認(rèn)是美元符號鸣峭,你可以自己傳入所需的符號,例如我傳入人民幣:
{{num | currency : '¥'}}
2. date (日期格式化)
原生的js對日期的格式化能力有限酥艳,ng提供的date過濾器基本可以滿足一般的格式化要求摊溶。用法如下:
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
3. filter(匹配子串)
這個(gè)名叫filter的filter用來處理一個(gè)數(shù)組,然后可以過濾出含有某個(gè)子串的元素玖雁,作為一個(gè)子數(shù)組來返回更扁「峭螅可以是字符串?dāng)?shù)組赫冬,也可以是對象數(shù)組。如果是對象數(shù)組溃列,可以匹配屬性的值劲厌。它接收一個(gè)參數(shù),用來定義子串的匹配規(guī)則听隐。
$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
];
$scope.func = function(e){
return e.age>4;
}
{{ childrenArray | filter : 'a' }} //匹配屬性值中含有a的
{{ childrenArray | filter : 4 }} //匹配屬性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //參數(shù)是對象补鼻,匹配name屬性中含有i的
{{childrenArray | filter : func }} //參數(shù)是函數(shù),指定返回age>4的
4. json(格式化json對象)
json過濾器可以把一個(gè)js對象格式化為json字符串雅任,沒有參數(shù)风范。
這東西有什么用呢,我一般也不會(huì)在頁面上輸出一個(gè)json串啊沪么,官網(wǎng)說它可以用來進(jìn)行調(diào)試硼婿,嗯,是個(gè)不錯(cuò)的選擇禽车】苈或者,也可以用在js中使用殉摔,作用就和我們熟悉的JSON.stringify()一樣州胳。
{{ jsonTest | json}}
5. limitTo(限制數(shù)組長度或字符串長度)
limitTo過濾器用來截取數(shù)組或字符串,接收一個(gè)參數(shù)用來指定截取的長度逸月,如果參數(shù)是負(fù)值栓撞,則從數(shù)組尾部開始截取。
{{ childrenArray | limitTo : 2 }} //將會(huì)顯示數(shù)組中的前兩項(xiàng)
6. lowercase(小寫)
7. uppercase(大寫)
8. number(格式化數(shù)字)
number過濾器可以為一個(gè)數(shù)字加上千位分割碗硬,像這樣瓤湘,123,456,789。同時(shí)接收一個(gè)參數(shù)肛响,可以指定float類型保留幾位小數(shù)
{{ num | number : 2 }}
自定義過濾器
filter的自定義方式也很簡單岭粤,使用module的filter方法,返回一個(gè)函數(shù)特笋,該函數(shù)接收輸入值剃浇,以及參數(shù)巾兆,并返回處理后的結(jié)果。
//----過濾數(shù)組中下標(biāo)為奇數(shù)的元素
module.filter("ageFilter", function() {
return function(inputArray, age, name) {
var array = [];
for (var i = 0; i < inputArray.length; i++) {
var item = inputArray[i];
if (item.name == name && item.age > age) {
array.push(item);
}
}
return array;
}
});
格式就是這樣虎囚,你的處理邏輯就寫在內(nèi)部的那個(gè)閉包函數(shù)中。你也可以讓自己的過濾器接收參數(shù)淘讥,參數(shù)就定義在return的那個(gè)函數(shù)中圃伶,作為第二個(gè)參數(shù),或者更多個(gè)參數(shù)也可以蒲列。