AngularJS ui-select — применить фильтр при поиске

Я реализую i18n с помощью https://angular-translate.github.io/, а также использую пользовательский интерфейс-выбрать.

Когда у меня есть выбор для ["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 для перевода перед поиском значений?


javascript angularjs angular-translate ui-select
person Saita    schedule 17.01.2018    source источник
comment
Можете ли вы сделать предыдущую обработку myList, прежде чем показывать ее в пользовательском интерфейсе? Я спрашиваю, потому что вы можете получить i18ns до рендеринга значений, обновить список, а затем выполнить поиск по i18n. Я не знаю, ясно ли я выражаюсь.   -  person lealceldeiro    schedule 17.01.2018
comment
Вы можете создать собственный фильтр, который выполняет перевод перед поиском соответствия.   -  person shaunhusain    schedule 17.01.2018
comment
@shaunhusain ваш комментарий помог мне. Я могу связать фильтры, чтобы я мог перевести список, прежде чем запрашивать его. Если вы можете, напишите как ответ, чтобы я мог пометить его как правильный.   -  person Saita    schedule 06.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Написание пользовательского фильтра может позволить вам связать фильтры, чтобы получить желаемый отфильтрованный список:

.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)
person shaunhusain    schedule 08.03.2018
comment
Я только что попробовал этот подход, но происходит то, что переведенное значение оказывается в моей модели, но мне нужно значение до того, как оно будет переведено. - person Saita; 12.03.2018