你的位置:首页 > Java教程

[Java教程]使用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>