переводьте только первый вариант выбора

Question

Я создаю приложение с AngularJS.

Приложение является многоязычным. Вы можете изменить язык в раскрывающемся списке (выберите элемент HTML).

У меня есть следующий выбор:

<select id="filter" class="form-control" ng-model="filter" ng-change="ref()" ng-options="rt.text | translate for rt in rts track by rt.value"> 
</select> 

Вы можете увидеть, что text применяется фильтр, который translate. Это часть модуля Angular Translate.

My dropdown динамически заполняется из базы данных, и у него есть дополнительная опция, которая является опцией по умолчанию.

Что я хочу, это перевести вариант по умолчанию при изменении языка, и я не уверен, как это сделать.

Проблема с текущим решением заключается в том, что если у него есть другой вариант с многоязычным переводом, они будут переведены. Я не хочу этого, все, что я хочу, это перевести только вариант по умолчанию.

Когда я добавляю опцию по умолчанию, я устанавливаю ее на index=0 с value='all' и text='Show all'.

Структура РТО:

[ 
{ 
    value:'all', 
    text: 'Select_all' 
}, 
{ 
    value:'1', 
    text: 'option 1' 
}, 
{ 
    value:'2', 
    text: 'Option 2' 
} 
] 

Answer 1

EDIT: к сожалению, это будет работать только тогда, когда значение параметра пусто, на ngOptions документы

Удалить параметр по умолчанию из ng-options, например, используя rts.slice(1).

Добавьте его, используя бирку <option> внутри <select>.

<select ... ng-options="..."> 
    <option value=""> 
     {{ rts[0].text | translate }} 
    </option> 
</select> 

Тогда у вас не будет проблем с переводом только по умолчанию.

Answer 2

Почему бы просто не перевести только этот вариант на пути с вашего сервера? Я предполагаю, что ваш контроллер выглядит примерно следующим образом. Кроме того, вы должны будете слушать $translateChangeSuccess так что вы знаете, когда изменения языка:

module.controller('RtsCtrl', function ($rootScope, $scope, $translate, rtsService) { 
    var translateDefaultOption = function (options) { 
     options[0].text = $translate(options[0].text); 
     $scope.rts = options; 
    }; 

    var getTranslatedOptions = function() { 
     rtsService 
       .getOptions()/*<- Might want to cache this or not*/ 
       .then(translateDefaultOption); 
    }; 

    getTranslatedOptions(); 

    var cleanUpOnDestroy = $rootScope.$on('$translateChangeSuccess', getTranslatedOptions); 
    $scope.on('$destroy', cleanUpOnDestroy); 
}); 

Очевидно, что я не знаю, как на самом деле работает контроллер, так что это просто грубый пример.