AngularJS篩選器

    在用AngularJS開發前端項目時經常會遇到數據的特殊處理，對於不同的數據處理可以採用篩選器的方式達到想要的效果，開發過程中我們可以使用AngularJS的內置篩選器，也可以使用自定義的篩選器，本篇會介紹兩個方面：(1)AngularJS內置篩選器   (2)自定義篩選器

    一、AngularJS內置篩選器

         1、大小寫轉換換

          {{"lower cap string" | uppercase}}  //轉大寫 LOWER CAP STRING
          {{"TANK IS GOOD" | lowercase}}      //轉小寫 tank is good

         2、date格式化

          {{1470296879 | date}}                       //結果:8  4, 2016
          {{1470296879 | date:"MM/dd/yyy @ h:mma"}}   //結果:08/04/2016 @ 15:47AM
          {{1470296879 | date:"yyy-MM-dd hh:mm:ss"}}  //結果:2016-08-04 15:47:59

        3、number格式化

          {{1.234567 | number:1}}   //結果:1.2
          {{1234567  | number }}    //結果:1,234,567

        4、currency貨幣格式化

          {{ 250 | currency }}            //結果: $250.00
          {{ 250 | currency:"RMB ￥ "}}   //結果: RMB ￥ 250.00
          {{ 250 | currency:"￥ "}}       //結果: ￥ 250.00

        5、limitTo字符串，對象的截取

         字符串截取:
         {{ "i love tank" | limitTo:6   }}  //結果: i love
         {{ "i love tank  | limitTo:-4" }}  //結果: tank
 
        對象截取:
        {{ [ {"age":20, "id":10, "name":"iphone"},
             {"age":12, "id":11, "name":"sunm xing"},
             {"age":44, "id":12, "name":"test abc"}
         ] | limitTo:1 }}
   
        //結果: [{"age":20, "id":10, "name":"iphone"}]

        6、filter查找

        查找含有某個字符行
        {{ [ {"age":20, "id":10, "name":"iphone"},
             {"age":12, "id":11, "name":"sunm xing"},
             {"age":44, "id":12, "name":"test abc"}
        ] | filter:'s'}}

         //結果: [{"age":12, "id":11, "name":"sunm xing"},{"age":44, "id":12, "name":"test abc"}]

        查找對象
        {{ [ {"age":20, "id":10, "name":"iphone"},
             {"age":12, "id":11, "name":"sunm xing"},
             {"age":44, "id":12, "name":"test abc"}
         ] | filter:{'name':'iphone'}  }}

        //結果: [{"age":20, "id":10, "name":"iphone"}]

   二、自定義篩選器

         例:後臺服務器返回一個字段palteID(車牌)，如果字段爲正常數據則進行加空格處理，如果字段爲undefind或者爲"無牌車xxxx"則處理爲“無牌車”

        1、自定義filter

/*篩選器--車牌樣式*/
payForCarCtrls.filter('plateFilter', function() {
    return function(plateId) {

        var plateStr;

    if (!plateId || plateId === "無牌車xxxx") {

            plateStr = "無牌車";
        } else {

            plateStr = plateId.substr(0, 2) + " " + plateId.substr(2, 6)
        }
        return plateStr;
    };
});

         2、數據處理

          {{item.plateID | plateFilter}}

        在拿到數據後選擇相應的篩選器，之後篩選器會根據數據返回需求的數據格式並顯示在界面上

        3、可以在處理一個數據時同時使用多個篩選器（即多個管道命令）

          {{  “gfdsa”  | uppercase | limitTo:3 }}

         //結果:GFD