1.內(nèi)置過(guò)濾器
創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)安寧,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220
* $filter 過(guò)濾器,是angularJs中用來(lái)處理數(shù)據(jù)以更好的方式展示給我用戶。比如格式化日期,轉(zhuǎn)換大小寫(xiě)等等。 * 過(guò)濾器即有內(nèi)置過(guò)濾器也支持自定義過(guò)濾器。內(nèi)置過(guò)濾器很多,可以百度。關(guān)鍵是如何使用: * 1.在HTML中直接使用內(nèi)置過(guò)濾器 * 2.在js代碼中使用內(nèi)置過(guò)濾器 * 3.自定義過(guò)濾器 * * (1)常用內(nèi)置過(guò)濾器 * number 數(shù)字過(guò)濾器,可以設(shè)置保留數(shù)字小數(shù)點(diǎn)后幾位等 * date 時(shí)間格式化過(guò)濾器,可自己設(shè)置時(shí)間格式 * filter 過(guò)濾的數(shù)據(jù)一般是數(shù)組,數(shù)組中的數(shù)據(jù)可以是對(duì)象,字符串等 * orderBy 排序根據(jù)數(shù)組中某一個(gè)元素的屬性排序等 * lowercase 轉(zhuǎn)換小寫(xiě) * uppercase 轉(zhuǎn)換大寫(xiě) * limitTo 字符串剪切 使用格式{{被剪切的字符串|limitTo:數(shù)值}} 數(shù)值絕對(duì)值代表要切得字符個(gè)數(shù),正代表從頭開(kāi)始切,負(fù)值相反。 * * */
2.自定義過(guò)濾器
/* * 定義格式: * 模塊名稱.filter(‘過(guò)濾器名字',function(){ * return function(被過(guò)濾數(shù)據(jù),條件1,條件2.。。。){ * //過(guò)濾操作 * } * }); * */
套用上面的格式定義兩個(gè)簡(jiǎn)單的自定義過(guò)濾器一個(gè)帶條件的,一個(gè)不帶條件的。
(1)【不帶條件】,功能:固定轉(zhuǎn)換(有時(shí)候項(xiàng)目中會(huì)遇到角色代號(hào),門(mén)店編碼什么的,但是顯示的時(shí)候要顯示對(duì)應(yīng)中文,比如字段code:101代表老板
這時(shí)候像這種code值比較多,那就用過(guò)濾器比較好。)
myApp.filter("ChangeCode",function () { return function (inputData) { var changed = ""; switch (inputData){ case '101':changed = "老板";break; case '102':changed = "經(jīng)理";break; case '103':changed = "員工";break; } return changed; } }); /*完成,說(shuō)一下使用場(chǎng)景(就這個(gè)過(guò)濾器的功能)和方式。 * 場(chǎng)景:服務(wù)器返回的數(shù)據(jù)中有個(gè)字段code,直接放標(biāo)簽里<div>{{data.code}}</div>,會(huì)顯示code值而不是code值對(duì)應(yīng)的職稱,這時(shí)候就可以用這個(gè)專門(mén) * 針對(duì)這個(gè)轉(zhuǎn)換的自定義過(guò)濾器 * 使用方式: * (1)HTML中:<div>{{data.code | ChangeCode}}</div>//跟內(nèi)置過(guò)濾器一樣的方式 * (2)js中:變量 = $filter("ChangeCode")(被過(guò)濾的code數(shù)據(jù))//一樣的調(diào)用方式 * * */
(2)【帶條件】,功能過(guò)濾掉一組數(shù)組中某個(gè)字段值為某個(gè)值的數(shù)據(jù),比如這里定義一個(gè)過(guò)濾掉所有年齡為某個(gè)值的過(guò)濾器。參數(shù)就是年齡
myApp.filter("deleteByAge",function () { return function (input,byAge,age) { var array = []; for(var i=0;i<input.length;i++){ if(input[i][byAge]!=age){ array.push(input[i]); } } return array; } }) /* * 處理一組數(shù)據(jù)的時(shí)候一般很少用在HTML當(dāng)中,帶條件的自定義過(guò)濾器是根據(jù)年齡值,也可以根據(jù)數(shù)組元素中的任意一個(gè)屬性值進(jìn)行刪除過(guò)濾。 * 使用方式:變量 = $filter("deleteByAge")(數(shù)組,“屬性名稱”,屬性值); * */
【總結(jié)內(nèi)置過(guò)濾器的使用方式】
(1)在HTML中一般格式為: {{被過(guò)濾的數(shù)據(jù) | 過(guò)濾器名稱:條件1:條件2.。。。}} ;過(guò)濾條件之間用‘:'隔開(kāi).
(2)在代碼中一般格式為: 變量 = $filter("過(guò)濾器名稱")(被過(guò)濾數(shù)據(jù),過(guò)濾條件1,過(guò)濾條件2,。。。。。。)
【自定義過(guò)濾器】
(1)定義格式:
model.filter(filterName,function(){ return function(參數(shù)1,參數(shù)2,參數(shù)3.。。。。參數(shù)N){ //過(guò)濾器處理部分 } })
model:模塊名稱
filterName: 過(guò)濾器名稱
參數(shù)1:被過(guò)濾的數(shù)據(jù)
參數(shù)2:一般為過(guò)濾條件,可以有多個(gè),后面的參數(shù)3一直到參數(shù)N都是,根據(jù)需要添加。
以上所述是小編給大家介紹的詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
當(dāng)前題目:詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
網(wǎng)址分享:http://bm7419.com/article46/iidchg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、、微信小程序、用戶體驗(yàn)、商城網(wǎng)站、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)