AngularJs 条件为 "or" 的过滤器?
AngularJs filter with "or" condition?
代码可在此处获得:https://plnkr.co/edit/gbbsEnXxVpLsxvtKsDxw?p=preview。过滤器 filter: { a : 'x' }
有效,只显示一行。
问题:
- 似乎
filter: { a : 'xxx' }
匹配 a
中的任何文本,只要该文本包含字符串 xxx
。如果我想做精确匹配怎么办?
- 如何实现:显示所有行 if
a = 'xxx' or b = 3
not not use c
?
- 也许最好在 `model.dashbardRows?
上使用 javascript 代码
dashboard.component.js
(function () {
'use strict';
angular.module('testModule', [])
.component('dashboard', {
templateUrl: 'dashboard.component.html',
controllerAs: 'model',
controller: [controller]
});
function controller() {
var model = this;
model.dashboardRows = [
{a:'xxx', b:1, c:'ss'},
{a:'yyy', b:2, c:'tt'},
{a:'zzz', b:3, c:'uu'}];
}
})();
dashboard.component.html
<div>
Test
<table>
<tr ng-repeat="i in model.dashboardRows | filter: { a : 'x' }">
<td>{{i.a}}</td>
<td>{{i.b}}</td>
</tr>
</table>
</div>
看看 filter filter 文档,你可以传入一个可选的 comparator
参数。
true
: A shorthand for function(actual, expected) { return angular.equals(actual, expected)}. This is essentially strict comparison of expected and actual.
注意这是区分大小写的(因为字符串比较在 JS 中区分大小写)。
页面底部也有一个示例,演示过滤全部或仅过滤一个 属性。如果您的过滤很复杂,或者您的源数据很大,在控制器中进行过滤也有助于提高可读性和性能。
我认为你应该使用自定义过滤器
module.filter('myFilter', function(){
return function(input){
return input.filter(yourFilterFn);
};
});
ng-repeat="item in items | myFilter"
正如@Valery 所建议的那样,使用自定义过滤器是解决此问题的最佳方法。
Here is fork using custom filter(multiple conditions)
dashboard.component.js
.filter("optionalFilter",function(){
//console.log("filter loads");
return function(items, firstArgument,secondArgument){
//console.log("item is ",items); // it is value upon which you have to filter
//console.log("firstArgument is ",firstArgument);
//console.log("secondArgument ",secondArgument);
var filtered = [];
angular.forEach(items, function(value, key) {
//console.log("val ::",value);
if(value.a == firstArgument || value.b == secondArgument){
// console.log("val ::",value.a);
this.push(value);
}
}, filtered);
//console.log("val ::",filtered);
return filtered;
}
dashboard.component.html
<tr ng-repeat="i in model.dashboardRows | optionalFilter:'aaa':2">
有用的参考资料:
- Passing arguments to angularjs filters
- Filters
代码可在此处获得:https://plnkr.co/edit/gbbsEnXxVpLsxvtKsDxw?p=preview。过滤器 filter: { a : 'x' }
有效,只显示一行。
问题:
- 似乎
filter: { a : 'xxx' }
匹配a
中的任何文本,只要该文本包含字符串xxx
。如果我想做精确匹配怎么办? - 如何实现:显示所有行 if
a = 'xxx' or b = 3
not not usec
? - 也许最好在 `model.dashbardRows? 上使用 javascript 代码
dashboard.component.js
(function () {
'use strict';
angular.module('testModule', [])
.component('dashboard', {
templateUrl: 'dashboard.component.html',
controllerAs: 'model',
controller: [controller]
});
function controller() {
var model = this;
model.dashboardRows = [
{a:'xxx', b:1, c:'ss'},
{a:'yyy', b:2, c:'tt'},
{a:'zzz', b:3, c:'uu'}];
}
})();
dashboard.component.html
<div>
Test
<table>
<tr ng-repeat="i in model.dashboardRows | filter: { a : 'x' }">
<td>{{i.a}}</td>
<td>{{i.b}}</td>
</tr>
</table>
</div>
看看 filter filter 文档,你可以传入一个可选的 comparator
参数。
true
: A shorthand for function(actual, expected) { return angular.equals(actual, expected)}. This is essentially strict comparison of expected and actual.
注意这是区分大小写的(因为字符串比较在 JS 中区分大小写)。
页面底部也有一个示例,演示过滤全部或仅过滤一个 属性。如果您的过滤很复杂,或者您的源数据很大,在控制器中进行过滤也有助于提高可读性和性能。
我认为你应该使用自定义过滤器
module.filter('myFilter', function(){
return function(input){
return input.filter(yourFilterFn);
};
});
ng-repeat="item in items | myFilter"
正如@Valery 所建议的那样,使用自定义过滤器是解决此问题的最佳方法。
Here is fork using custom filter(multiple conditions)
dashboard.component.js
.filter("optionalFilter",function(){
//console.log("filter loads");
return function(items, firstArgument,secondArgument){
//console.log("item is ",items); // it is value upon which you have to filter
//console.log("firstArgument is ",firstArgument);
//console.log("secondArgument ",secondArgument);
var filtered = [];
angular.forEach(items, function(value, key) {
//console.log("val ::",value);
if(value.a == firstArgument || value.b == secondArgument){
// console.log("val ::",value.a);
this.push(value);
}
}, filtered);
//console.log("val ::",filtered);
return filtered;
}
dashboard.component.html
<tr ng-repeat="i in model.dashboardRows | optionalFilter:'aaa':2">
有用的参考资料:
- Passing arguments to angularjs filters
- Filters