Angularjs使用ng-repeat从i18n翻译下拉列表
angularjs translate dropdown list from i18n using ng-repeat
我的英文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>
相关文章:
- 如何使用jQuery选择下拉列表的值
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 禁用jQuery中的下拉列表
- 如何在按钮中显示下拉列表中选定的元素
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 如何使用PHP和JS级联三个下拉列表
- 如何在使用剑道 MVVM 下拉列表时强制选择第一项
- 语义ui如何使用javascript启用或禁用下拉列表
- 无法使用PHP动态设置下拉列表中的值
- 如何根据对具有多行的先前列表的选择来动态加载下拉列表
- 下拉列表在使用z索引放置在前面后停止工作
- 从多维嵌套json数组创建下拉列表
- 如何在剑道下拉列表中按文本和值搜索
- 使用下拉列表筛选列表(ul>li)
- 如何使用jquery从下拉列表(javascript)中选择192.168.3.0进行测试自动化
- 使用codeigniter的多链下拉列表
- Angularjs使用ng-repeat从i18n翻译下拉列表