中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解AngularJS中$filter過濾器使用(自定義過濾器)

發布時間:2020-09-30 11:02:22 來源:腳本之家 閱讀:392 作者:wjk_along 欄目:web開發

1.內置過濾器

* $filter 過濾器,是angularJs中用來處理數據以更好的方式展示給我用戶。比如格式化日期,轉換大小寫等等。
* 過濾器即有內置過濾器也支持自定義過濾器。內置過濾器很多,可以百度。關鍵是如何使用:
* 1.在HTML中直接使用內置過濾器
* 2.在js代碼中使用內置過濾器
* 3.自定義過濾器
*
* (1)常用內置過濾器
*    number 數字過濾器,可以設置保留數字小數點后幾位等
*    date  時間格式化過濾器,可自己設置時間格式
*    filter 過濾的數據一般是數組,數組中的數據可以是對象,字符串等
*    orderBy 排序根據數組中某一個元素的屬性排序等
*    lowercase 轉換小寫
*    uppercase 轉換大寫
*    limitTo  字符串剪切 使用格式{{被剪切的字符串|limitTo:數值}} 數值絕對值代表要切得字符個數,正代表從頭開始切,負值相反。
*
* */

2.自定義過濾器

/*
* 定義格式:
* 模塊名稱.filter(‘過濾器名字',function(){
*    return function(被過濾數據,條件1,條件2.。。。){
*    //過濾操作
*    }
* });
* */

    套用上面的格式定義兩個簡單的自定義過濾器一個帶條件的,一個不帶條件的。

(1)【不帶條件】,功能:固定轉換(有時候項目中會遇到角色代號,門店編碼什么的,但是顯示的時候要顯示對應中文,比如字段code:101代表老板

    這時候像這種code值比較多,那就用過濾器比較好。)

myApp.filter("ChangeCode",function () {
  return function (inputData) {
    var changed = "";
    switch (inputData){
      case '101':changed = "老板";break;
      case '102':changed = "經理";break;
      case '103':changed = "員工";break;
    }
    return changed;
  }
});
/*完成,說一下使用場景(就這個過濾器的功能)和方式。
* 場景:服務器返回的數據中有個字段code,直接放標簽里<div>{{data.code}}</div>,會顯示code值而不是code值對應的職稱,這時候就可以用這個專門
*    針對這個轉換的自定義過濾器
* 使用方式:
*      (1)HTML中:<div>{{data.code | ChangeCode}}</div>//跟內置過濾器一樣的方式
*      (2)js中:變量 = $filter("ChangeCode")(被過濾的code數據)//一樣的調用方式
*      
* */

(2)【帶條件】,功能過濾掉一組數組中某個字段值為某個值的數據,比如這里定義一個過濾掉所有年齡為某個值的過濾器。參數就是年齡

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;
  }
})
/*
* 處理一組數據的時候一般很少用在HTML當中,帶條件的自定義過濾器是根據年齡值,也可以根據數組元素中的任意一個屬性值進行刪除過濾。
* 使用方式:變量 = $filter("deleteByAge")(數組,“屬性名稱”,屬性值);
* */

【總結內置過濾器的使用方式】

 (1)在HTML中一般格式為:  {{被過濾的數據 | 過濾器名稱:條件1:條件2.。。。}}    ;過濾條件之間用‘:'隔開.

 (2)在代碼中一般格式為:  變量 = $filter("過濾器名稱")(被過濾數據,過濾條件1,過濾條件2,。。。。。。)

【自定義過濾器】

 (1)定義格式:   

    model.filter(filterName,function(){
       return function(參數1,參數2,參數3.。。。。參數N){
         //過濾器處理部分
        }
      })

      model:模塊名稱

      filterName: 過濾器名稱

      參數1:被過濾的數據

      參數2:一般為過濾條件,可以有多個,后面的參數3一直到參數N都是,根據需要添加。

以上所述是小編給大家介紹的詳解AngularJS中$filter過濾器使用(自定義過濾器),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

堆龙德庆县| 麟游县| 石泉县| 旬阳县| 慈溪市| 合肥市| 静安区| 平潭县| 南安市| 通河县| 观塘区| 大城县| 霍城县| 宜宾市| 临邑县| 稷山县| 大邑县| 运城市| 遂川县| 昭苏县| 平乐县| 兴安盟| 冕宁县| 裕民县| 磴口县| 江山市| 宜昌市| 北流市| 桃园县| 密山市| 交城县| 闸北区| 丰宁| 阿克| 报价| 彭阳县| 松桃| 兴义市| 根河市| 布拖县| 介休市|