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