javascript - AngularJS ui-select - 在搜索时应用过滤器

Question

我正在使用 https://angular-translate.github.io/ 实现 i18n我也使用 ui-select。

当我有 ["FOO", "BAR"] 的选择，并且我想翻译这些值时，我可以:

<ui-select ng-model="myModel">
   <ui-select-match>
     <span ng-bind="$select.selected | translate"></span>
   </ui-select-match>
   <ui-select-choices repeat="item in (myList | filter: $select.search)">
     <span ng-bind="item | translate"></span>
   </ui-select-choices>
</ui-select>

问题是当我想过滤值时。假设我将 FOO 翻译成 BANANA，将 BAR 翻译成 ORANGE。

如果我键入“BA”，则会显示“ORANGE”，因为它过滤的是 ["FOO", "BAR"]，而不是 ["BANANA", "ORANGE"]。

此外，我无法更改列表，因为我想在我的模型上使用 FOO 和 BAR。

如果在搜索值之前，如何过滤要翻译的 myList 的值？

Answer 1

编写自定义过滤器可以让您链接过滤器以获得所需的过滤列表:

.filter('myLangFilter', function(translationDict){
  return function(input){
    return input.map(function(cur) { return translationDict[cur]?translationDict[cur]:cur; })
  }
})

然后链接到您的自定义过滤器中可以执行以下操作:

item in (myList | myLangFilter | filter: $select.search)