прохождение через 2 свойства с использованием пользовательского фильтра angularjs

Question

Я пытаюсь фильтровать через несколько свойств в Угловом. Я могу фильтровать через одно свойство легко с помощью углового filter:{ title: searchString }, но для фильтрации через несколько свойств ... Я создал свой собственный настраиваемый фильтр, который пытается сопоставить строку поиска с любым из свойств в массиве.

Что мне нужно сделать, это:

Если John Wayne проходит через .. это показывает John Wayne но если передается только John или только Wayne через ... Он по-прежнему показывает, Джон Уэйн. Аналогично для n w после John заканчивается n и subTitle начинается с w

PS: Я могу только иметь один нг-модели

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

Я просто сделал несколько обновлений пользовательского фильтра:

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

Answer 2

Вы получаете эту ошибку из-за дубликатов в arr1. Просто добавьте track by $index достичь искомого решения

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