使用AngularJS中的filterFilter函数进行过滤

AngularJS中有一个filterFilter函数用来对集合过滤，非常方便。

源代码大致如下：

function filterFilter(){
    return function(aray, expression comparator){
        if(!isArray(array)) return array;

        var comparatorType = typeof(comparator),
            predicates = [],
            evaluatedObjects = [];

        predicates.check = function(value){
            for(var j = 0; j < predicates.length; jii){
                if(!predicates[j](value){
                    return false;
                })
            }
            return true;
        }

        if(comparatorType != ‘function‘{
            if(comparatorType === ‘boolean‘ && comparator){
                comparator = function(obj, text){
                    return angular.equals(obj, text);
                }
            } else {
                comparator = function(obj, text){
                    ...
                }
            }
        })
    }
}

controller部分如下：

angular
  .module(‘app‘)
  .controller(‘MainCtrl‘, [‘$scope‘,
    function($scope) {
    $scope.users = $scope.users = [
        {name: ‘‘, email: ‘‘, joined: 2015-1-1}
    ];

    $scope.filter = {
      fuzzy: ‘‘,
      name: ‘‘
    };

    ...

  }]);

■ 搜索所有任意字段

<input type="text" ng-model="filter.any" >

<tr ng-repeat="user in users | filter: filter.any">
    <td>{{user.name}}</td>
    <td>{{user.email}}</td>
    <td>{{user.joined | date}}</td>
</tr>

■ 搜索某个字段

<input type="text" ng-model="filter.name">

<tr ng-repeat="user in users
    | filter: filter.any
    | filter: {name: filter.name}">
    <td>{{user.name}}</td>
    <td>{{user.email}}</td>
    <td>{{user.joined | date}}</td>
</tr>

如果想name字段完全匹配：

<tr ng-repeat="user in users
    | filter: filter.any
    | filter: {name: filter.name}：true">
    <td>{{user.name}}</td>
    <td>{{user.email}}</td>
    <td>{{user.joined | date}}</td>
</tr>

■ 搜索时间段

contrlller部分修改为：

angular
  .module(‘app‘)
  .controller(‘MainCtrl‘, [‘$scope‘,
    function($scope) {
    $scope.users = $scope.users = [
        {name: ‘‘, email: ‘‘, joined: 2015-1-1}
    ];

    $scope.filter = {
      fuzzy: ‘‘,
      name: ‘‘
    };

    $scope.minDate = new Date(‘January 1, 2000‘);
    $scope.maxDate = new Date();

    $scope.min = function(actual, expected) {
      return actual >= expected;
    };

    $scope.max = function(actual, expected) {
      return actual <= expected;
    };

  }]);

页面部分为：

<input type="text" ng-model="fromDate" data-min-date="{{minDate}}">
<input type="text" ng-model="untilDate" data-max-date="{{maxDate}}">

<tr ng-repeat="user in users
    | filter: filter.any
    | filter: {name: filter.name}
    | filter: {joined: untilDate}:max
    | filter: {joined: beforeDate}:min">
    <td>{{user.name}}</td>
    <td>{{user.email}}</td>
    <td>{{user.joined | date}}</td>
</tr>