With Angular Translate and $translate.instant() method I built AngularJS's select component with automatic switching between languages:
<translated-select
elements="$ctrl.values"
current-value="$ctrl.value"
on-change="$ctrl.setValue(value)"
></translated-select>
{{ $ctrl.value }}
<hr>
<button ng-click="$ctrl.switchToPolish()">
Switch to polish
</button>
<button ng-click="$ctrl.switchToEnglish()">
Switch to english
</button>
As you can see on Plunker: Angular JS select with automated translations. Problem is that it shows select
s options as undefined until I choose second option. Then everything works, and I can switch between english and polish translations of options. I tried even wait for first change with $onChanges
hook and if change occurred run $digest
with $timeout
:
this.$onChanges = function (changes) {
if (changes.elements) {
$timeout(function () {
this.values = changes.elements.currentValue;
}.bind(this));
}
if (changes.currentValue) {
$timeout(function () {
this.value = changes.currentValue.currentValue;
}.bind(this));
}
}
But again and again, I have to choose second option in select to make it work. Am I missing something? I would be grateful if anybody will help me, thank you in advance.
$translate.instant() isn't aware of the fact that the translation might not be loaded completely.
As per documentation:
Returns a translation instantly from the internal state of loaded translation.
So if you don't rely on $translate.instant() you could also use the translate filter (which uses a watch internally) as follows:
<select ng-model="$ctrl.value"' + 'ng-options="value as (value | translate) for value in $ctrl.values" ' + ' ng-change="$ctrl.onSelect()" ' + '></select>
A complete example can be found here: