詳解AngularJS中$filter過濾器使用(自定義過濾器)
1.內置過濾器
* $filter 過濾器,是angularJs中用來處理數(shù)據(jù)以更好的方式展示給我用戶。比如格式化日期,轉換大小寫等等。
* 過濾器即有內置過濾器也支持自定義過濾器。內置過濾器很多,可以百度。關鍵是如何使用:
* 1.在HTML中直接使用內置過濾器
* 2.在js代碼中使用內置過濾器
* 3.自定義過濾器
*
* (1)常用內置過濾器
* number 數(shù)字過濾器,可以設置保留數(shù)字小數(shù)點后幾位等
* date 時間格式化過濾器,可自己設置時間格式
* filter 過濾的數(shù)據(jù)一般是數(shù)組,數(shù)組中的數(shù)據(jù)可以是對象,字符串等
* orderBy 排序根據(jù)數(shù)組中某一個元素的屬性排序等
* lowercase 轉換小寫
* uppercase 轉換大寫
* limitTo 字符串剪切 使用格式{{被剪切的字符串|limitTo:數(shù)值}} 數(shù)值絕對值代表要切得字符個數(shù),正代表從頭開始切,負值相反。
*
* */
2.自定義過濾器
/*
* 定義格式:
* 模塊名稱.filter(‘過濾器名字',function(){
* return function(被過濾數(shù)據(jù),條件1,條件2.。。。){
* //過濾操作
* }
* });
* */
套用上面的格式定義兩個簡單的自定義過濾器一個帶條件的,一個不帶條件的。
(1)【不帶條件】,功能:固定轉換(有時候項目中會遇到角色代號,門店編碼什么的,但是顯示的時候要顯示對應中文,比如字段code:101代表老板
這時候像這種code值比較多,那就用過濾器比較好。)
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;
}
});
/*完成,說一下使用場景(就這個過濾器的功能)和方式。
* 場景:服務器返回的數(shù)據(jù)中有個字段code,直接放標簽里<div>{{data.code}}</div>,會顯示code值而不是code值對應的職稱,這時候就可以用這個專門
* 針對這個轉換的自定義過濾器
* 使用方式:
* (1)HTML中:<div>{{data.code | ChangeCode}}</div>//跟內置過濾器一樣的方式
* (2)js中:變量 = $filter("ChangeCode")(被過濾的code數(shù)據(jù))//一樣的調用方式
*
* */
(2)【帶條件】,功能過濾掉一組數(shù)組中某個字段值為某個值的數(shù)據(jù),比如這里定義一個過濾掉所有年齡為某個值的過濾器。參數(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ù)的時候一般很少用在HTML當中,帶條件的自定義過濾器是根據(jù)年齡值,也可以根據(jù)數(shù)組元素中的任意一個屬性值進行刪除過濾。
* 使用方式:變量 = $filter("deleteByAge")(數(shù)組,“屬性名稱”,屬性值);
* */
【總結內置過濾器的使用方式】
(1)在HTML中一般格式為: {{被過濾的數(shù)據(jù) | 過濾器名稱:條件1:條件2.。。。}} ;過濾條件之間用‘:'隔開.
(2)在代碼中一般格式為: 變量 = $filter("過濾器名稱")(被過濾數(shù)據(jù),過濾條件1,過濾條件2,。。。。。。)
【自定義過濾器】
(1)定義格式:
model.filter(filterName,function(){
return function(參數(shù)1,參數(shù)2,參數(shù)3.。。。。參數(shù)N){
//過濾器處理部分
}
})
model:模塊名稱
filterName: 過濾器名稱
參數(shù)1:被過濾的數(shù)據(jù)
參數(shù)2:一般為過濾條件,可以有多個,后面的參數(shù)3一直到參數(shù)N都是,根據(jù)需要添加。
以上所述是小編給大家介紹的詳解AngularJS中$filter過濾器使用(自定義過濾器),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 詳解AngularJS中自定義過濾器
- AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能示例
- AngularJS 自定義過濾器詳解及實例代碼
- AngularJS自定義過濾器用法經(jīng)典實例總結
- Angularjs 依賴壓縮及自定義過濾器寫法
- angularJs自定義過濾器實現(xiàn)手機號信息隱藏的方法
- AngularJS實現(xiàn)的自定義過濾器簡單示例
- 簡述angular自定義過濾器在頁面和控制器中的使用
- Angular.Js中過濾器filter與自定義過濾器filter實例詳解
- 詳解Angular的內置過濾器和自定義過濾器【推薦】
- angularjs自定義過濾器demo示例
相關文章
Angular.JS判斷復選框checkbox是否選中并實時顯示
最近因為工作需要做了一個選擇標簽的功能,把一些標簽展示給用戶,用戶選擇自己喜歡的標簽,就類似我們在購物網(wǎng)站看到的那種過濾標簽似的,所以這篇文章就給大家介紹了Angular.JS判斷復選框checkbox是否選中并實時顯示的方法,下面來一起看看吧。2016-11-11
Angular2中constructor和ngOninit的使用講解
這篇文章主要介紹了Angular2中constructor和ngOninit的使用講解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05
angularJs中$http獲取后臺數(shù)據(jù)的實例講解
今天小編就為大家分享一篇angularJs中$http獲取后臺數(shù)據(jù)的實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
ionic3實戰(zhàn)教程之隨機布局瀑布流的實現(xiàn)方法
這篇文章主要給大家介紹了關于ionic3實戰(zhàn)教程之隨機布局瀑布流的實現(xiàn)方法,文中通過示例代碼和圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12
Angular.js ng-file-upload結合springMVC的使用教程
這篇文章主要給大家介紹了關于Angular.js文件上傳控件ng-file-upload結合springMVC的使用教程,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-07-07

