Translate object inside controller

Question

I'm new to angularjs. I'm making an application which uses angularjs and Ng tags input.

Everything is fine, but I can't translate the source which is bound to ng tags input.

Here is my code :

<tags-input ng-model="tags"
            add-on-paste="true">
   <auto-complete source="Fruits"></auto-complete>
</tags-input>

And in my controller, I have :

var app = angular.module('at', ['pascalprecht.translate']);

app.config(function ($translateProvider) {
$translateProvider.translations('en', {
     PINE_APPLE: 'Pine apple',
     LEMON : 'Lemon',
     TOMATO: 'Tomato'
});

$translateProvider.preferredLanguage('en');
});

app.controller('Ctrl', function ($scope, $translate) {
$scope.Fruits = [
{
    text: 'TOMATO',
    value: 1
},
{
    text: 'PINE_APPLE',
    value: 2
},  
{
    text: 'LEMON',
    value: 3
}];

$scope.changeLanguage = function (key) {
   $translate.use(key);
   };
});

My question is : how can I translate my Fruits inside Ctrl controller to bind to ng tags input ?

Can anyone help me please ? Thank you.

try text: $translate.instant('TOMATO');. You will have to watch language change though — juvian, Mar 17 '16 at 19:07
mmm, check http://stackoverflow.com/questions/20540877/correct-use-for-angular-translate-in-controllers — juvian, Mar 18 '16 at 01:12
As you see, my Fruits object is an array of another objects each contains text and value properties. I've seen the solution at the link you gave me, it only helps me to translate without keeping value. — Redplane, Mar 18 '16 at 12:51
Best way is to change the template, but without that you could do something like this: https://jsfiddle.net/dtnreejk/ — juvian, Mar 18 '16 at 14:53
Possible duplicate of [Correct use for angular-translate in controllers](https://stackoverflow.com/questions/20540877/correct-use-for-angular-translate-in-controllers) — Darren Shewry, Jul 20 '17 at 06:27

score 3 · Accepted Answer · answered Apr 20 '16 at 11:15

To translate the texts into a JSON object , you could try to translate the texts and then create the object with these translated texts.

var app = angular.module('at', ['pascalprecht.translate']);

app.config(function ($translateProvider) {
$translateProvider.translations('en', {
     TOMATO: 'Tomato'
});

$translateProvider.preferredLanguage('en');
});

app.controller('Ctrl', function ($scope, $translate) {

var TEXT_TRANSLATED = $translate.instant('TOMATO'); //NEW LINE

$scope.Fruits = [
{
    text: TEXT_TRANSLATED,
    value: 1
}
];

I hope you find it useful!

score 0 · Answer 2 · answered Mar 23 '16 at 09:24

0

Thank you , juvian Finally, I tried to apply custom template of ng-tag input as you said, and it worked with dynamic translation.

answered Mar 23 '16 at 09:24

Redplane

2,971
4
30
59

Translate object inside controller

2 Answers2