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函数过滤的相关知识,希望对大家有所帮助。