AngularJS ui-select - apply filter while searching

Question

I am implementing i18n with https://angular-translate.github.io/ and I also use ui-select.

When I have a select for ["FOO", "BAR"], and I want to translate those values I can:

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

The problem is when I want to filter the values. Let's say I translate FOO to BANANA and BAR to ORANGE.

If I type "BA", "ORANGE" shows up because it is filtering ["FOO", "BAR"], not ["BANANA", "ORANGE"].

Also, I can't change the list because I want to have FOO and BAR on my model.

How can I filter the values of myList to translate if before searching for values?

Answer 1

Writing a custom filter can allow you to chain the filters in order to get the desired filtered list:

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

Then to chain in your custom filter could do something like:

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