Angularjs使用ng-repeat从i18n翻译下拉列表

angularjs translate dropdown list from i18n using ng-repeat

本文关键字:翻译 下拉列表 i18n 使用 ng-repeat Angularjs      更新时间:2023-09-26

我的英文i18n翻译json文件assets/i18n/en.json如下所示(这是英文翻译,我在同一目录中还有其他几个其他语言的文件):

{
  "project": {
    "SPONSORINFO": {
      "MAIN" : "Select the Sponsor Name",
      "SPONSORLIST": [
        {"spons" :"SponsorName 1" },
        {"spons" :"SponsorName 2" }
      ]
    }
  }
}
这是我的HTML视图:
<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>
标签中的translate="project.SPONSORINFO.MAIN"正确显示值"选择赞助商名称"。这部分没问题。

问题:

如何在下拉菜单中重复SPONSORLIST列表中的项目?
我现在没有显示任何你能猜到的东西。

编辑:

我在main.js中有一个全局配置,如下所示:

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();
}]);

但是我的视图控制器中没有任何关于翻译的引用

编辑2:

对不起,我忘了在我的mainCtrl.js中分享,我有以下加载了我的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();

更新2(建议的解决方案,但不工作):

在我的视图控制器中,当我手动加载en.json文件时,我的下拉菜单工作。

$http.get('assets/i18n/en.json').success(function(data) {
     $scope.projectJSON = data;
});
使用ng-repeat:

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

但是我不知道如何从环境中加载所选语言,以便它自动加载首选语言文件。我的尝试如下,但不工作:

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

建议答案(效率不高):

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

现在的问题是:
这解决了我的问题,但是当我改变语言时,菜单和其他使用mainCtrl.js翻译的翻译,通过使用translate="project.SPONSORINFO.MAIN",就像上面例子中我的label一样,它们立即得到更新。但是,当我使用我的函数加载所选语言并将其传递给$http函数以加载所选语言文件时,菜单不会立即更改为所选语言,我需要刷新页面然后进行翻译。

如何修复这个bug?我怎么能不通过这个函数,并使用它从mainCtrl.js作为label正在使用?

你可以使用angular-translate的translate过滤器来实现这一点。一般来说,过滤器是这样工作的:

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

在你的例子中应该是这样的:

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