当前位置: 首页 > 编程笔记 >

Angularjs中如何使用filterFilter函数过滤

何超英
2023-03-14
本文向大家介绍Angularjs中如何使用filterFilter函数过滤,包括了Angularjs中如何使用filterFilter函数过滤的使用技巧和注意事项,需要的朋友参考一下

AngularJS的filter,中文名“过滤器”是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东。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>

以上所述是小编给大家分享的Angularjs中如何使用filterFilter函数过滤的相关知识,希望对大家有所帮助。

 类似资料:
  • 问题内容: 当我用ng-repeat迭代一些数组时,我想在过滤器中使用参数 例: HTML部分: JavaScript部分: 但是我希望能够使用像 但是它不起作用。我该怎么做? 问题答案: 更新: 我想我对文档的了解并不足够,但是您绝对可以使用具有以下语法的过滤器过滤器(请参阅此小提琴)来按对象的属性过滤: 如果有帮助,这是我的原始答案: 使用过滤器过滤器将无法传递参数,但是至少可以做两件事。 1

  • 问题内容: 我想在过滤器中向后端请求并返回请求的结果。问题是服务$ http返回一个承诺,这就是问题。 对于存在的问题,我用$超时和角度在我的小提琴的承诺: 我的小提琴 在我的过滤器中,我使用带有承诺的$ timeout,但是最终目标是使用请求http: }); 然后在我看来,我使用了我的过滤器,该过滤器假定以2秒的延迟显示“ ca marche”,但这不起作用: 您会看到过滤器不返回任何内容,并

  • 问题内容: 我有一个包含JSON对象的数组(_users)。 1-如何仅过滤具有“活动”:“ 1”而不是“ 0”的用户 我已经尝试过这样的事情: 但无法为我正常工作。 谢谢! 问题答案: 由于您的对象模型有点复杂,因此我建议您使用自定义过滤功能: 然后在您的HTML中: 这是工作中的jsFiddle:http : //jsfiddle.net/pkozlowski_opensource/4kzzy

  • 我有以下数据: 现在我想以这样一种方式过滤数据,我可以删除第6行和第7行,对于特定的uid,我想在代码中只保留一行值为'c' 所以预期的数据应该是: 我使用的窗口函数如下所示:

  • 问题内容: 我正在尝试做类似的事情: AngularJs部分: 但是不知何故,它向我展示了所有物品。如何筛选(键,值)? 问题答案: Angular 过滤器只能通过angular的API应用于数组,而不能应用于对象- “从数组中选择项的子集,并将其作为新数组返回。” 您在此处有两个选择: 1)移至数组或 -2)预过滤项目,如下所示: 并在控制器上: jsfiddle :http : //jsfid

  • 在我的控制器中,我想过滤一个对象数组。这些对象中的每一个都是一个映射,可以包含字符串和列表 我尝试使用< code>$filter('filter')(array,function)格式,但是我不知道如何在我的函数中访问数组的各个元素。这里有一个片段显示了我想要的。 然后在中,我将检查每个单独的属性是否匹配 我必须在控制器中完成所有这些操作,并编译一个列表列表并在范围内设置它们。因此,我确实需要以