[英]Angular.js ng-repeat filter by property having one of multiple values (OR of values)
是否可以过滤一个对象数组,这样属性的值可以是几个值中的一个(OR 条件),而无需编写自定义过滤器
这类似于这个问题 - Angular.js ng-repeat :filter by single field
但不是
<div ng-repeat="product in products | filter: { color: 'red' }">
有没有可能做这样的事情
<div ng-repeat="product in products | filter: { color: 'red'||'blue' }">
对于样本数据如下 -
$scope.products = [
{ id: 1, name: 'test', color: 'red' },
{ id: 2, name: 'bob', color: 'blue' }
/*... etc... */
];
我试过不成功
<div ng-repeat="product in products | filter: { color: ('red'||'blue') }">
最好的方法是使用一个函数:
<div ng-repeat="product in products | filter: myFilter">
$scope.myFilter = function (item) {
return item === 'red' || item === 'blue';
};
或者,您可以使用ngHide 或 ngShow根据特定条件动态显示和隐藏元素。
对我来说,它的工作原理如下:
<div ng-repeat="product in products | filter: { color: 'red'||'blue' }">
<div ng-repeat="product in products | filter: { color: 'red'} | filter: { color:'blue' }">
我认为ng-if
应该有效:
<div ng-repeat="product in products" ng-if="product.color === 'red'
|| product.color === 'blue'">
在 HTML 中:
<div ng-repeat="product in products | filter: colorFilter">
在角度:
$scope.colorFilter = function (item) {
if (item.color === 'red' || item.color === 'blue') {
return item;
}
};
这是一种在传递额外参数时执行此操作的方法:
https://stackoverflow.com/a/17813797/4533488 (感谢 Denis Pshenov)
<div ng-repeat="group in groups">
<li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)">
<span>{{friend.name}}</span>
<li>
</div>
与后端:
$scope.weDontLike = function(name) {
return function(friend) {
return friend.name != name;
}
}
.
还有另一种仅使用模板内过滤器的方法:
https://stackoverflow.com/a/12528093/4533488 (感谢 mikel)
<div ng:app>
<div ng-controller="HelloCntl">
<ul>
<li ng-repeat="friend in friends | filter:{name:'!Adam'}">
<span>{{friend.name}}</span>
<span>{{friend.phone}}</span>
</li>
</ul>
</div>
在找不到一个好的通用解决方案之后,我自己做了一些事情。 我还没有针对一个非常大的列表对其进行测试。
它处理嵌套的键、数组或任何东西。
app.filter('xf', function() {
function keyfind(f, obj) {
if (obj === undefined)
return -1;
else {
var sf = f.split(".");
if (sf.length <= 1) {
return obj[sf[0]];
} else {
var newobj = obj[sf[0]];
sf.splice(0, 1);
return keyfind(sf.join("."), newobj)
}
}
}
return function(input, clause, fields) {
var out = [];
if (clause && clause.query && clause.query.length > 0) {
clause.query = String(clause.query).toLowerCase();
angular.forEach(input, function(cp) {
for (var i = 0; i < fields.length; i++) {
var haystack = String(keyfind(fields[i], cp)).toLowerCase();
if (haystack.indexOf(clause.query) > -1) {
out.push(cp);
break;
}
}
})
} else {
angular.forEach(input, function(cp) {
out.push(cp);
})
}
return out;
}
})
HTML
<input ng-model="search.query" type="text" placeholder="search by any property">
<div ng-repeat="product in products | xf:search:['color','name']">
...
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.