javascriptangularjsionic-frameworkangular-translate

Switch the translated term


I have an Ionic Multilingual App in which there's a select. One of the select options disable some page elements. So far so good.

But one of the elements has to change its text supplied by the translation.

SELECTED OPTION: A ->

{{"1ST_TERM" | translate}}

SELECTED OPTION: B ->

{{"2ND_TERM" | translate}}

My code for the select is:

<select id="select" 
ng-model="selOption" 
ng-change="selectUpdate(selOption)">
     <option value="A">SICLANO</option>
     <option value="B">BELTRANO</option>
</select>

<p id="text">CORRECT TRANSLATED TERM</p>

$scope.selectUpdate= function(selOption){
   switch (selOption){
     case 'A':
             //CHANGE #text TO TRANSLATED TERM 1ST_TERM 
     case 'B':
             //CHANGE #text TO TRANSLATED TERM 2ND_TERM
   };
};

Can you guys help?


Solution

  • You can inject $translate service and use to get translation:

    $scope.selectUpdate= function(selOption){
       switch (selOption){
         case 'A':
                 $translate(selOption).then(function (translated) {
                    $scope.text = translated;
                 }
       };
    };
    

    To show it, add interpolation to p tag:

    <p id="text">{{text}}</p>