Angularjs中如何使用filterFilter函数过滤
AngularJS的filter,中文名“过滤器”是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东。AngularJS中有一个filterFilter函数用来对集合过滤,非常方便。
源代码大致如下:
functionfilterFilter(){ returnfunction(aray,expressioncomparator){ if(!isArray(array))returnarray; varcomparatorType=typeof(comparator), predicates=[], evaluatedObjects=[]; predicates.check=function(value){ for(varj=0;j<predicates.length;jii){ if(!predicates[j](value){ returnfalse; }) } returntrue; } if(comparatorType!='function'{ if(comparatorType==='boolean'&&comparator){ comparator=function(obj,text){ returnangular.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:'' }; ... }]);
搜索所有任意字段
<inputtype="text"ng-model="filter.any"> <trng-repeat="userinusers|filter:filter.any"> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.joined|date}}</td> </tr>
搜索某个字段
<inputtype="text"ng-model="filter.name"> <trng-repeat="userinusers |filter:filter.any |filter:{name:filter.name}"> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.joined|date}}</td> </tr>
如果想name字段完全匹配:
<trng-repeat="userinusers |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=newDate('January1,2000'); $scope.maxDate=newDate(); $scope.min=function(actual,expected){ returnactual>=expected; }; $scope.max=function(actual,expected){ returnactual<=expected; }; }]);
页面部分为:
<inputtype="text"ng-model="fromDate"data-min-date="{{minDate}}"> <inputtype="text"ng-model="untilDate"data-max-date="{{maxDate}}"> <trng-repeat="userinusers |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>
以上所述是小编给大家分享的Angularjs中如何使用filterFilter函数过滤的相关知识,希望对大家有所帮助。