使用自定义过滤器过滤 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 也是如此,因为 Johnn 结尾,而 subTitlew

开头

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