AngularJs之Filter篇

過濾器(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ù)也可以蒲列。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市蝗岖,隨后出現(xiàn)的幾起案子侥猩,更是在濱河造成了極大的恐慌,老刑警劉巖抵赢,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件欺劳,死亡現(xiàn)場離奇詭異,居然都是意外死亡铅鲤,警方通過查閱死者的電腦和手機(jī)划提,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來邢享,“玉大人鹏往,你說我怎么就攤上這事⊥找牵” “怎么了掸犬?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長绪爸。 經(jīng)常有香客問我湾碎,道長,這世上最難降的妖魔是什么奠货? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任介褥,我火速辦了婚禮,結(jié)果婚禮上递惋,老公的妹妹穿的比我還像新娘柔滔。我一直安慰自己,他們只是感情好萍虽,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布睛廊。 她就那樣靜靜地躺著,像睡著了一般杉编。 火紅的嫁衣襯著肌膚如雪超全。 梳的紋絲不亂的頭發(fā)上咆霜,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天,我揣著相機(jī)與錄音嘶朱,去河邊找鬼蛾坯。 笑死,一個(gè)胖子當(dāng)著我的面吹牛疏遏,可吹牛的內(nèi)容都是我干的脉课。 我是一名探鬼主播,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼财异,長吁一口氣:“原來是場噩夢啊……” “哼倘零!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起宝当,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤视事,失蹤者是張志新(化名)和其女友劉穎胆萧,沒想到半個(gè)月后庆揩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡跌穗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年订晌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚌吸。...
    茶點(diǎn)故事閱讀 40,117評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡锈拨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出羹唠,到底是詐尸還是另有隱情奕枢,我是刑警寧澤,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布佩微,位于F島的核電站缝彬,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏哺眯。R本人自食惡果不足惜谷浅,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望奶卓。 院中可真熱鬧一疯,春花似錦、人聲如沸夺姑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽盏浙。三九已至眉睹,卻和暖如春留潦,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辣往。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工兔院, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人站削。 一個(gè)月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓坊萝,卻偏偏與公主長得像,于是被迫代替她去往敵國和親许起。 傳聞我的和親對象是個(gè)殘疾皇子十偶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)园细,斷路器惦积,智...
    卡卡羅2017閱讀 134,665評論 18 139
  • 轉(zhuǎn)載文章 angularjs 過濾器(filter)正如其名,作用就是接收一個(gè)輸入猛频,通過某個(gè)規(guī)則進(jìn)行處理狮崩,然后返回...
    飛將軍閱讀 607評論 0 2
  • AngularJS是什么?AngularJs(后面就簡稱ng了)是一個(gè)用于設(shè)計(jì)動(dòng)態(tài)web應(yīng)用的結(jié)構(gòu)框架鹿寻。首先睦柴,它是...
    200813閱讀 1,607評論 0 3
  • 通過AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小戀閱讀 1,759評論 1 21
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 46,823評論 6 342