詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
1.內(nèi)置過(guò)濾器
* $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ò)濾器
/*
* 定義格式:
* 模塊名稱(chēng).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)的職稱(chēng),這時(shí)候就可以用這個(gè)專(zhuān)門(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ù)組,“屬性名稱(chēng)”,屬性值);
* */
【總結(jié)內(nèi)置過(guò)濾器的使用方式】
(1)在HTML中一般格式為: {{被過(guò)濾的數(shù)據(jù) | 過(guò)濾器名稱(chēng):條件1:條件2.。。。}} ;過(guò)濾條件之間用‘:'隔開(kāi).
(2)在代碼中一般格式為: 變量 = $filter("過(guò)濾器名稱(chēng)")(被過(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:模塊名稱(chēng)
filterName: 過(guò)濾器名稱(chēng)
參數(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ì)腳本之家網(wǎng)站的支持!
- 詳解AngularJS中自定義過(guò)濾器
- AngularJS使用Filter自定義過(guò)濾器控制ng-repeat去除重復(fù)功能示例
- AngularJS 自定義過(guò)濾器詳解及實(shí)例代碼
- AngularJS自定義過(guò)濾器用法經(jīng)典實(shí)例總結(jié)
- Angularjs 依賴(lài)壓縮及自定義過(guò)濾器寫(xiě)法
- angularJs自定義過(guò)濾器實(shí)現(xiàn)手機(jī)號(hào)信息隱藏的方法
- AngularJS實(shí)現(xiàn)的自定義過(guò)濾器簡(jiǎn)單示例
- 簡(jiǎn)述angular自定義過(guò)濾器在頁(yè)面和控制器中的使用
- Angular.Js中過(guò)濾器filter與自定義過(guò)濾器filter實(shí)例詳解
- 詳解Angular的內(nèi)置過(guò)濾器和自定義過(guò)濾器【推薦】
- angularjs自定義過(guò)濾器demo示例
相關(guān)文章
使用Angular緩存父頁(yè)面數(shù)據(jù)的方法
這篇文章主要介紹了使用Angular緩存父頁(yè)面數(shù)據(jù)的方法,需要的朋友可以參考下2017-01-01
詳解Angular2表單-模板驅(qū)動(dòng)的表單(Template-Driven Forms)
本篇文章主要介紹了詳解Angular2表單-模板驅(qū)動(dòng)的表單(Template-Driven Forms),具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
AngularJS單選框及多選框?qū)崿F(xiàn)雙向動(dòng)態(tài)綁定
這篇文章主要為大家詳細(xì)介紹了AngularJS單選框及多選框?qū)崿F(xiàn)雙向動(dòng)態(tài)綁定的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01
angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能,結(jié)合完整實(shí)例形式分析了AngularJS隨機(jī)數(shù)生成與數(shù)值判定相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
Angular.Js之Scope作用域的學(xué)習(xí)教程
這篇文章主要給大家分享了關(guān)于Angular.Js之Scope作用域的學(xué)習(xí)教程 ,文中通過(guò)多個(gè)示例代碼介紹的非常詳細(xì),相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-04-04
詳解angularJs中自定義directive的數(shù)據(jù)交互
這篇文章主要介紹了詳解angularJs中自定義directive的數(shù)據(jù)交互,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
AngularJS實(shí)現(xiàn)表單手動(dòng)驗(yàn)證和表單自動(dòng)驗(yàn)證
本文是對(duì)AngularJS表單驗(yàn)證,手動(dòng)驗(yàn)證或自動(dòng)驗(yàn)證的講解,對(duì)學(xué)習(xí)JavaScript編程技術(shù)有所幫助,感興趣的小伙伴們可以參考一下2015-12-12
AngularJS通過(guò)$location獲取及改變當(dāng)前頁(yè)面的URL
本篇將介紹AngularJS中的$location服務(wù)的基本用法,$location服務(wù)的主要作用是用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄。本文通過(guò)示例代碼介紹的很詳細(xì),有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-09-09

