使用自定义过滤器过滤 2 个属性 angularjs
filting through 2 properties using custom filter angularjs
我正在尝试过滤 Angular 中的多个属性。我可以使用 angular filter:{ title: searchString }
轻松过滤一个 属性 但要过滤多个属性...我创建了自己的自定义过滤器,它试图通过以下方式匹配搜索字符串数组中的任何属性。
我需要做的是:
如果 John Wayne
通过..它显示 John Wayne
但如果仅 John
或仅 Wayne
通过...它仍然显示 John Wayne。 n w
也是如此,因为 John
以 n
结尾,而 subTitle
以 w
开头
PS: 我只能有一个ng-model
HTML:
<input type="text" ng-model="searchString">
<div ng-repeat="tel in arr1 | customFilter: searchString:['title','subTitle']"></div>
JS:
$scope.arr1 = [
{title: 'John', subTitle:'Wayne'}
{title: 'Barry'}
];
.filter('customFilter',[ function() {
return function(items, searchText, attrs) {
var filtered = [];
var filteredItems = items.map(function(item) {
angular.forEach(attrs, function(attr) {
if (item.hasOwnProperty(attr)) {
filtered.push(item);
}
});
});
return filtered;
};
}])
我的问题是我收到一条错误消息:
Duplicates in a repeater are not allowed. Use 'track by' expression to
specify unique keys. Repeater: tel in arr1
您收到此错误是因为 arr1
中存在重复项。只需添加 track by $index
即可实现所需的解决方案
<div ng-repeat="tel in arr1 track by $index | custommFilter: searchString:['title','subTitle']"></div>
我刚刚对您的自定义过滤器进行了一些更新:
app.filter('customFilter',[ function() {
return function(items, searchText, attrs) {
var filtered = [];
for (var i in items){
var keepGoing = true;
angular.forEach(attrs, function(attr) {
console.log(items[i][attr])
if (items[i].hasOwnProperty(attr) && items[i][attr].includes(searchText) && keepGoing) {
filtered.push(items[i]);
keepGoing=false;
}
});
}
return filtered;
};
}])
考虑到在这种情况下区分大小写。
虽然按预期工作,但我觉得它可以改进。
Plunker 示例:
https://plnkr.co/edit/YnkSSOpG8sBQvVChIIuP?p=preview
我正在尝试过滤 Angular 中的多个属性。我可以使用 angular filter:{ title: searchString }
轻松过滤一个 属性 但要过滤多个属性...我创建了自己的自定义过滤器,它试图通过以下方式匹配搜索字符串数组中的任何属性。
我需要做的是:
如果 John Wayne
通过..它显示 John Wayne
但如果仅 John
或仅 Wayne
通过...它仍然显示 John Wayne。 n w
也是如此,因为 John
以 n
结尾,而 subTitle
以 w
PS: 我只能有一个ng-model
HTML:
<input type="text" ng-model="searchString">
<div ng-repeat="tel in arr1 | customFilter: searchString:['title','subTitle']"></div>
JS:
$scope.arr1 = [
{title: 'John', subTitle:'Wayne'}
{title: 'Barry'}
];
.filter('customFilter',[ function() {
return function(items, searchText, attrs) {
var filtered = [];
var filteredItems = items.map(function(item) {
angular.forEach(attrs, function(attr) {
if (item.hasOwnProperty(attr)) {
filtered.push(item);
}
});
});
return filtered;
};
}])
我的问题是我收到一条错误消息:
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: tel in arr1
您收到此错误是因为 arr1
中存在重复项。只需添加 track by $index
即可实现所需的解决方案
<div ng-repeat="tel in arr1 track by $index | custommFilter: searchString:['title','subTitle']"></div>
我刚刚对您的自定义过滤器进行了一些更新:
app.filter('customFilter',[ function() {
return function(items, searchText, attrs) {
var filtered = [];
for (var i in items){
var keepGoing = true;
angular.forEach(attrs, function(attr) {
console.log(items[i][attr])
if (items[i].hasOwnProperty(attr) && items[i][attr].includes(searchText) && keepGoing) {
filtered.push(items[i]);
keepGoing=false;
}
});
}
return filtered;
};
}])
考虑到在这种情况下区分大小写。
虽然按预期工作,但我觉得它可以改进。
Plunker 示例: https://plnkr.co/edit/YnkSSOpG8sBQvVChIIuP?p=preview