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

【问题标题】：AngularJS ui-select - apply filter while searchingAngularJS ui-select - 搜索时应用过滤器
【发布时间】：2018-03-09 00:23:41
【问题描述】：

我正在使用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 的值以进行翻译？

【问题讨论】：

你能在 ui-select 中显示之前对myList 进行先前的“处理”吗？我问是因为您可以在呈现值之前获取 i18ns，更新列表然后在 i18n 上搜索。我不知道我是不是在说清楚。
您可以创建一个自定义过滤器，在查找匹配项之前进行翻译。
@shaunhusain 你的评论帮助了我。我可以链接过滤器，以便在查询之前翻译列表。如果可以，请将其作为答案发布，以便我将其标记为正确。

标签： javascript angularjs angular-translate ui-select

【解决方案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)

【讨论】：

我刚刚尝试了这种方法，但结果是翻译后的值最终出现在我的模型中，但我想要在翻译之前的值。