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

Question

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

当我有 ["FOO"、"BAR"] 的 select 并且我想翻译这些值时，我可以：

<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)

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

AngularJS ui-select - apply filter while searching

javascript

angularjs

angular-translate

ui-select