Блог

У меня есть объект narrow.searchedMenu с 3 дочерними массивами одинаковой длины, которые я отображаю ng-repeat с помощью track by $index , потому что есть несколько повторяющихся элементов.

     <ul>
      <li ng-repeat="item in narrow.searchedMenu.description track by $index">
         {{ narrow.searchedMenu.name[$index] }},
         {{ narrow.searchedMenu.short_name[$index] }},
         {{ narrow.searchedMenu.description[$index] }}</li>
  </ul>
  

Мне нужно иметь возможность фильтровать отображаемые результаты, сохраняя только те результаты, в которых ключевое слово появляется в description . Если a description не совпадает, я хочу исключить name and short_name , а также description .

Обычно я бы использовал что-то вроде этого:

 | filter{description:'chicken'} 
  

добавляется в конец ng-repeat инструкции. Однако, похоже, это не работает track by .

Это выдает мне эту ошибку на консоли, когда я пытаюсь это сделать:

Ошибка: [$parse:синтаксис] http://errors.angularjs.org/1.5.8/$parse/syntax?p0={amp;p1=is an unexpected tokenamp;p2=16amp;p3=NaNndex |%filter{description:’chicken’}amp;p4={description:’chicken’}

Я пробовал несколько других потенциальных решений, но пока безуспешно.

Обратите внимание, что $scope он не вводится в мой контроллер, и если я попытаюсь использовать пользовательский фильтр, я получу следующую ошибку:

«Ошибка: [filter:notarray] errors.angularjs.org/1.5.8/filter/notarray?p0=0 «;

И последнее — мне сказали избегать includes , потому что он недостаточно широко поддерживается (кто-то сказал что-то об polyfill альтернативе, но я не уверен, применимо ли это к этому?).

Вы можете использовать пользовательский фильтр, прикрепленный к объекту в вашем контроллере, при условии, что вы вводите track by в качестве последнего оператора ng-repeat .

Фильтр в вашем контроллере будет выглядеть следующим образом:

 menu.chickenFilter = function(item) {
  return (item.indexOf('chicken') > -1)
}
  

ng-repeat Станет:

 <li ng-repeat="item in narrow.searchedMenu.description | filter: narrow.chickenFilter  track by $index">
         {{ narrow.searchedMenu.name[$index] }},
         {{ narrow.searchedMenu.short_name[$index] }},
         {{ narrow.searchedMenu.description[$index] }}</li>
  

Продолжайте с этим

  <ul>
  <li ng-repeat="item in narrow.searchedMenu track by $index" ng-if="narrow.searchedMenu[$index].description.indexOf('chicken')>-1">
     {{ narrow.searchedMenu.name[$index] }},
     {{ narrow.searchedMenu.short_name[$index] }},
     {{ narrow.searchedMenu.description[$index] }}</li>
</ul>
  

Я создал здесь плунжер

http://plnkr.co/edit/KXvD4JgwRe9wNszt8rCy?p=preview