angularJs-----$filter過濾器使用 自訂過濾器__Js

來源:互聯網
上載者:User
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都是,根據需要添加。
附件中有完整demo
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.