javascript - 在 ng-repeat 语句中按子数组过滤对象，该语句使用 track by $index 来处理重复

Question

我有一个带有 3 个等长子数组的对象 narrow.searchedMenu，我使用 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 不匹配，我想排除 name 和 short_name 以及 description。

通常我会使用这样的东西:

| filter{description:'chicken'} 

附加到ng-repeat语句的末尾。但是，它似乎不适用于 track by。

当我尝试时，它在控制台上给我这个错误:

Error: [$parse:syntax] http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=16&p3=NaNndex%20%7C%filter%7Bdescription%3A'chicken'%7D&p4=%7Bdescription%3A'chicken'%7D

我尝试了其他几种可能的解决方案，但到目前为止还没有成功。

请注意，$scope 未注入(inject)到我的 Controller 中，如果我尝试使用自定义过滤器，则会收到以下错误:

"Error: [filter:notarray] errors.angularjs.org/1.5.8/filter/notarray?p0=0";

最后一件事 - 我被告知要避免 includes 因为它没有得到足够广泛的支持(有人说 polyfill 是一种替代方案，但我'我不确定它是否适用于此？)。

Answer 1

您可以使用附加到 Controller 中的对象的自定义过滤器，只要将track by作为ng-repeat<中的最后一个语句/.

Controller 中的过滤器如下所示:

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>