Question

我正在尝试过滤Angular中的多个属性。我可以使用角度filter:{ title: searchString }轻松过滤一个属性，但过滤多个属性...我创建了自己的自定义过滤器，尝试通过数组中的任何属性匹配搜索字符串。

我需要做的是：

如果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;
  };
}])

我的问题是我收到错误说：

不允许在转发器中重复。使用'track by'表达式指定唯一键。中继器：tel in arr1

Answer 1

由于arr1中的重复，您收到此错误。只需添加track by $index即可获得所需的解决方案

<div ng-repeat="tel in arr1 track by $index | custommFilter: searchString:['title','subTitle']"></div>

Answer 2

我刚刚对您的自定义过滤器进行了一些更新：

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

使用自定义过滤器angularjs过滤2个属性

2 个答案: