angularjs translate dropdown list from i18n using ng-repeat

Question

My English language i18n translation json file assets/i18n/en.json is like the following (this is the english translation, I have several other files for other languages in the same directory):

{
  "project": {
    "SPONSORINFO": {
      "MAIN" : "Select the Sponsor Name",
      "SPONSORLIST": [
        {"spons" :"SponsorName 1" },
        {"spons" :"SponsorName 2" }
      ]
    }
  }
}

and here is my html view:

<div class="form-group" >
    <label for="form-field-select-1" translate="project.SPONSORINFO.MAIN">
    </label>
    <select class="form-control"  ng-model="myModel.sponsors">
        <option ng-repeat="s in spons.SPONSORLIST" value="{{s.spons}}">{{s.spons}}</option>
    </select>
</div>

The translate="project.SPONSORINFO.MAIN" in the label is rightly showing the value "Select the Sponsor Name" . No problem on this part.

Question:

How to ng-repeat the items in the list of SPONSORLIST in the dropdown menu?
what I currently have is not showing anything as you can guess.

edit :

I have a global config in my main.js like the following:

app.config(['$translateProvider',
function ($translateProvider) {

    // prefix and suffix information  is required to specify a pattern
    // You can simply use the static-files loader with this pattern:
    $translateProvider.useStaticFilesLoader({
        prefix: 'assets/i18n/',
        suffix: '.json'
    });

    // Since you've now registered more then one translation table, angular-translate has to know which one to use.
    // This is where preferredLanguage(langKey) comes in.
    $translateProvider.preferredLanguage('en');

    // Store the language in the local storage
    $translateProvider.useLocalStorage();

}]);

but I don't have any references in my view controller regarding the translation.

edit 2:

sorry, I forgot to share that in my mainCtrl.js, I have the following which is loaded with my index.html:

app.controller('AppCtrl', ['$rootScope', '$scope', '$state', '$translate', 
function ($rootScope, $scope, $state, $translate) {

    $scope.language = {
        // Handles language dropdown
        listIsOpen: false,
        // list of available languages
        available: {
            'en': 'English',
            //'it_IT': 'Italiano',
            'de_DE': 'Deutsch'
        },
        // display always the current ui language
        init: function () {
            var proposedLanguage = $translate.proposedLanguage() || $translate.use();
            var preferredLanguage = $translate.preferredLanguage();
            // we know we have set a preferred one in app.config
            $scope.language.selected = $scope.language.available[(proposedLanguage || preferredLanguage)];
        },
        set: function (localeId, ev) {
            $translate.use(localeId);
            $scope.language.selected = $scope.language.available[localeId];
            $scope.language.listIsOpen = !$scope.language.listIsOpen;
        }
    };

    $scope.language.init();

update 2 (proposed solution but not working):

in my view controller, when I manually, load the en.json file, my dropdown menu works.

$http.get('assets/i18n/en.json').success(function(data) {
     $scope.projectJSON = data;
});

using ng-repeat:

<option ng-repeat="s in projectJSON.project.SPONSORINFO.SPONSORLIST" value="{{s.spons}}">{{s.spons | translate}}</option>

but I don't know how to load the selected language from the environment so that it automatically loads the prefered language file. My attempt is the following but not working:

$scope.language.selected = function (localeId) {
$translate.use(localeId);
    $http.get('assets/i18n/'+localeId+'.json').success(function(data) {
        $scope.projectJSON= data;
    });
};

PROPOSED ANSWER (not efficient):

var lang = $translate.use();
$http.get('assets/i18n/'+lang+'.json').success(function(data) {
    $scope.projectJSON= data;
});

now the question is:
this solved my problem but when I change the language, the menus and other translations which use mainCtrl.js to translate, by using translate="project.SPONSORINFO.MAIN" as is the case with my labelin the above example, they get updated immediately. However, when I use my function to load the selected language and pass it into the $http function to load the selected language file, the menus don't get changed to the selected language immediately, I need to refresh the page and then they are translated.

How can I fix this bug? How can I NOT pass through this function and use it from the mainCtrl.js as the label is using?

@Sajeetharan I have given an example above. isn't it enough? or do you want something else? — cplus, Oct 22 '16 at 17:48
@Mpondomise you havent set any translations from what it looks in your code. — Sarantis Tofas, Oct 22 '16 at 18:11
@Akis , yes in my controller, there is nothing related to translation. But in my main.js, there is and I have posted above. And that is why the label is being pulled from the en.json with the help of the main.js code. however, the dropdown is not working. — cplus, Oct 22 '16 at 18:13
This question is duplicate of this http://stackoverflow.com/questions/40198763/angularjs-ng-repeat-the-dropdown-values-from-different-i18n-files/40320557#40320557 — Zura Sekhniashvili, Oct 29 '16 at 15:26

Sarantis Tofas · Answer 1 · 2016-10-22T19:27:52.810

1

You can achieve this using angular-translate's translate filter. In general the filter works like that:

<ANY>{{'TRANSLATION_ID' | translate}}</ANY>

In your case it should be like this:

<option ng-repeat="s in project.SPONSORINFO.SPONSORLIST" value="{{s.spons}}">{{s.spons | translate}}</option>

edited Oct 22 '16 at 19:27

answered Oct 22 '16 at 17:37

Sarantis Tofas

5,097
1
23
36

this is not working, shouldn't I include the `project.SPONSORINFO` as well? – cplus Oct 22 '16 at 17:48
do you have a `$scope.spons` variable? – Sarantis Tofas Oct 22 '16 at 17:57
no i don't, what should I add exactly to my controller? – cplus Oct 22 '16 at 18:00
@Mpondomise i thought you had that, updating the answer – Sarantis Tofas Oct 22 '16 at 18:02
I edited my question, with the config i had in my main.js , but nothing in my view controller. – cplus Oct 22 '16 at 18:03
I tried again, but unfortunately, not working! as I told above, the label is being translated, but not the dropdown values. – cplus Oct 22 '16 at 18:13
by inspecting the code, I get `` – cplus Oct 22 '16 at 18:16
@Mpondomise check this fiddle http://jsfiddle.net/cerdzpb5/ is this what you need? – Sarantis Tofas Oct 22 '16 at 18:30
the jsfiddle example is not showing the dropdown in your example, why? – cplus Oct 22 '16 at 18:33
the problem is that I am not correctly binding the `project.SPONSORINFO.SPONSORLIST` to my translation config in main.js. As you can see, my label is showing correctly, because, it is proceded by the binding tag of `translate` whereas the ng-repeat is not. – cplus Oct 22 '16 at 18:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126414/discussion-between-mpondomise-and-akis). – cplus Oct 22 '16 at 19:08
I updated my question, and added the mainCtrl.js related content. I think now my question and case is clear. Could you please look at the question again? – cplus Oct 22 '16 at 19:09