angularjs使用ng-repeat從i18n翻譯下拉列表

Question

我的英語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函數以加載所選語言文件時，菜單不會立即更改為所選語言，我需要刷新頁面然后它們是翻譯。

我該如何解決這個錯誤？ 我怎么能不通過這個函數，並在label使用的mainCtrl.js使用它？

Answer 1

你可以使用angular-translate的翻譯過濾器來實現這一點。 通常，過濾器的工作原理如下：

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

在你的情況下它應該是這樣的：

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