Multilingual interface with Angular

Question

I'm using angular-translate for my app , there is situation that i don't know how to handle this . i want to translate something in controller like this :

controller:

 $scope.liveHint = function (param) {

if ($scope.setActionType === 1) {          
            $scope.text = "something";
  }         
else if($scope.setActionType === 2){

 $scope.text = "something New";
}
}  

Html

<p ng-show="text">{{text}} </p>  

I dont know how to translate with conditions .

Any Idea ?

Answer 1

This can be done in multiple ways

Translate in controller

inject $translate service in your controller

if($scope.setActionType === 1) {
    $scope.text = $translate.instant("key_name_of_something")
}
else {
    $scope.text = $translate.instant("key_name_for_something_new")
}

translating using service is asynchronous, although we can use $translate.instant but change it according to your need

documentation - http://angular-translate.github.io/docs/#/guide/03_using-translate-service

View

<p ng-show="text">{{text}} </p>

Translate in view

Controller

if($scope.setActionType === 1) {
    $scope.text = "key_name_of_something"
}
else {
    $scope.text = "key_name_for_something_new"
}

View

<p ng-show="text">{{text | translate}} </p>
or
may be this will also work, you can try
<p ng-show="text" translate>{{text}}</p>

docs

http://angular-translate.github.io/docs/#/guide/04_using-translate-filter

http://angular-translate.github.io/docs/#/guide/05_using-translate-directive