Angular过滤器 filter

Angualar 过滤器

过滤器的作用可总结为对数据进行处理并返回需要的数据，其中包括对列表进行筛选、排序，或者对数据进行格式化处理等。

使用方式

使用 “|” 管道符号，这个符号在angular中表示调用过滤器格式化数据。例如：
{{exp | filtername : para1 : para2 : … paraN}}
管道符’|'可重复使用 。如 ： {{exp | filtername1 : para1 | filtername2 : para2 }} 两个管道符之间的关系为’并’
angular已经注册了一些常用的过滤器，如currency，date，json，filter，limitTo，lowercase，number，oderBy，uppercase。个人觉得filter的使用扩展性较大，可满足较多的需求。

//原始数据
var data = [{
    id: 1,
    name: "mingming",
    score: 60,
    sex: '男',
    child: {
        name: "dingding"
    }
}, {
    id: 2,
    name: "dongdong",
    score: 38,
    sex: '女'
}, {
    id: 3,
    name: "xiaoxia",
    score: 90,
    sex: '女'
}, {
    id: 4,
    name: "xixi",
    score: 77,
    sex: '男',
    child: {
        name: "dixi"
    }
}, {
    id: 5,
    name: "haha",
    score: 89,
    sex: '男'
}, {
    id: 6,
    name: "dongxi",
    score: 98,
    sex: '女',
    child: {
        name: "bo"
    }
}];

var mode = angular.module("demo", []);
mode.controller("filterDemo", function ($scope) {
    $scope.personList = data;
});

通过默认过滤器filter

语法

1.在页面中调用
personList | filter:{obj}

obj的类型

1. 字符串String
   当第一个参数是string 类型时，会对array的整条记录进行模糊筛选
   当lineFilter为’xi’时，表格中的结果是任意列中包含’xi’关键字的记录。

  <input type="text" class="form-control" id="exampleInputEmail1" ng-model="lineFilter" placeholder="lineFilter">
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover table-striped">
                    <tr>
                        <td>#</td>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>成绩</td>
                        <td>孩子姓名</td>
                    </tr>
                    <tr ng-repeat="row in personList | filter:lineFilter">
                        <td>{{row.id}}</td>
                        <td>{{row.name}}</td>
                        <td>{{row.sex}}</td>
                        <td>{{row.score}}</td>
                        <td>{{row.child? row.child.name : "--"}}</td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6"></div>
        </div>

2. JSON对象
   以key-value的格式，对列表进行筛选，见下例，会对personList中每一个对象的name和score进行模糊搜索，这是指定对某一列进行模糊筛选。
   如果有兴趣，也可以试试加上对child数据的过滤。当参数为json对象时，严格按照json对象的层级结构对数据进行筛选。

<input type="text" class="form-control"  ng-model="groupFilter.name" placeholder="groupFilter.name">
<input type="text" class="form-control" ng-model="groupFilter.score"  placeholder="groupFilter.score">
<table class="table table-hover table-striped">
       <tr>
              <td>#</td>
              <td>姓名</td>
              <td>性别</td>
              <td>成绩</td>
              <td>孩子姓名</td>
        </tr>
        <tr ng-repeat="row in personList | filter:groupFilter">
              <td>{{row.id}}</td>
              <td>{{row.name}}</td>
              <td>{{row.sex}}</td>
              <td>{{row.score}}</td>
              <td>{{row.child? row.child.name : "--"}}</td>
           </tr>
 </table>

3. 方法
   当传的参数为一个function时，这里的fn通常表示一种规则，可以传两个参数，第一个参数为列表中的一个item，第二个参数为这个item在列表中的index，可以根据每个item的特性，在方法中进行的逻辑处理，符合则返回true，不符合则返回false。
   在下面的例子中，传入filterFn规则，如果性别为‘男’或者在列表的序号’index’为偶数的时候，返回true，表示这一个是需要的item。最后得到性别为‘男’或者’index’为偶数的数据。（注：index从0开始）

var mode = angular.module("demo", []);
mode.controller("filterDemo", function ($scope) {
    $scope.personList = data;
    $scope.filterFn = function (item, index) {
        console.log(item);
        console.log(index);
        if (item.sex === '男') {
            return true;
        }
        if (index % 2 === 0) {
            return true;
        }
        return false;
    };
});

 <table class="table table-hover table-striped">
       <tr>
              <td>#</td>
              <td>姓名</td>
              <td>性别</td>
              <td>成绩</td>
              <td>孩子姓名</td>
        </tr>
        <tr ng-repeat="row in personList | filter:filterFn">
              <td>{{row.id}}</td>
              <td>{{row.name}}</td>
              <td>{{row.sex}}</td>
              <td>{{row.score}}</td>
              <td>{{row.child? row.child.name : "--"}}</td>
           </tr>
 </table>

2.在控制器中调用
需要在控制器中注入需要的$filter。
语法: $filter(‘filterName’)(data, param1)；
下面的例子为上面第三个例子的另一种形式。

$scope.personList2 = $filter('filter')(data, function (item, index) {
        if (item.sex === '男') {
            return true;
        }
        if (index % 2 === 0) {
            return true;
        }
        return false;
    });

自定义过滤器

语法

personList | customerFilter:param1:param2:param3…
允许的参数个数以自定义过滤器的参数为准。
在下面的例子中，自定义一个childrenFilter过滤器，第一个为默认参数（需要排序的数组），后面为自定义参数。
下面的代码中实现了先按照第一个条件isCheck判断需要对child进行筛选，然后按照第二个参数checkValue对child.name进行模糊搜索，返回筛选之后的列表。具体参数是什么作用和中间的逻辑没有太大的限制。
自定义过滤器的返回类型没有限制，可以是列表，对象，字符串…
这种形式的过滤器可全局使用，无需注入

<input type="checkbox" ng-model="isCheck">
<input type="text" class="form-control" ng-model="checkValue" placeholder="checkValue">
 <table class="table table-hover table-striped">
       <tr>
              <td>#</td>
              <td>姓名</td>
              <td>性别</td>
              <td>成绩</td>
              <td>孩子姓名</td>
        </tr>
        <tr ng-repeat="row in personList | childrenFilter:isCheck:checkValue">
              <td>{{row.id}}</td>
              <td>{{row.name}}</td>
              <td>{{row.sex}}</td>
              <td>{{row.score}}</td>
              <td>{{row.child? row.child.name : "--"}}</td>
           </tr>
 </table>

mode.filter("childrenFilter", function () {
    return function (array, isCheck, checkValue) {
        var result = [];
        if (isCheck) {
            for (var i = 0; i < array.length; i++) {
                var item = array[i];
                if (item.child) {
                    if (checkValue) {
                        if (item.child.name.indexOf(checkValue) >= 0) {
                            result.push(item);
                        }
                    } else {
                        result.push(item);
                    }
                }
            }
            return result;
        } else {
            return array;
        }
    };
});