項目中用到angular-ui-bootstrap插件中的datepicker，可是datepicker顯示的星期和月份是英文的，我需要他們都顯示成中文的，最簡單的方法就是用angularjs的i18n（Internationalization, 簡稱i18n）。
官方文檔告訴我們，我們只需引入相應的local文件就好了，例如我要引入中文的i18n文件，只需引入angular-locale_zh-ch.js。然后將ngLocal模塊注入我的當前工作模塊即可。
其中angular-locale_zh-ch.js如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
define([], function() {
angular.module("ngLocale", [], ["$provide",
function($provide) {
var PLURAL_CATEGORY = {
ZERO : "zero",
ONE : "one",
TWO : "two",
FEW : "few",
MANY : "many",
OTHER : "other"
};
$provide.value("$locale", {
"DATETIME_FORMATS" : {
"MONTH" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
"SHORTMONTH" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
"DAY" : ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
"SHORTDAY" : ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
"AMPMS" : ["上午", "下午"],
"medium" : "yyyy-M-d ah:mm:ss",
"short" : "yy-M-d ah:mm",
"fullDate" : "y年M月d日EEEE",
"longDate" : "y年M月d日",
"mediumDate" : "yyyy-M-d",
"shortDate" : "yy-M-d",
"mediumTime" : "ah:mm:ss",
"shortTime" : "ah:mm"
},
"NUMBER_FORMATS" : {
"DECIMAL_SEP" : ".",
"GROUP_SEP" : ",",
"PATTERNS" : [{
"minInt" : 1,
"minFrac" : 0,
"macFrac" : 0,
"posPre" : "",
"posSuf" : "",
"negPre" : "-",
"negSuf" : "",
"gSize" : 3,
"lgSize" : 3,
"maxFrac" : 3
}, {
"minInt" : 1,
"minFrac" : 2,
"macFrac" : 0,
"posPre" : "\u00A4",
"posSuf" : "",
"negPre" : "\u00A4-",
"negSuf" : "",
"gSize" : 3,
"lgSize" : 3,
"maxFrac" : 2
}],
"CURRENCY_SYM" : "¥"
},
"pluralCat" : function(n) {
return PLURAL_CATEGORY.OTHER;
},
"id" : "zh-cn"
});
}]);
});
|
ngLocal就是一個模塊，支持日期，數字和貨幣的國際化和本地化。另外，AngularJS還通過ngPluralize指令支持本地多元化。看下面這個例子：
見 https://github.com/angular/angular.js/blob/master/i18n/e2e/localeTest_zh.html
localTest_cn.html：
還有一種方法就是自定義i18n，畢竟官方給的i18n支持的本地化僅作用於日期，數字和貨幣。看下面的例子。
見http://jsfiddle.net/7zdpa/
index.html
app.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
var myApp = angular.module('myApp',['localization']);
myApp.controller('MyCtrl', function($rootScope) {
// default language setting
$rootScope.language = "en_US";
$rootScope.changeLang = function () {
if ($rootScope.language === "en_US") {
$rootScope.language = "zh_CN";
} else {
$rootScope.language = "en_US";
}
};
})
// i18n filter
angular.module('localization', [])
.filter('i18n', ['localizedTexts', '$rootScope', function (localizedTexts, $rootScope) {
return function (text) {
currentLanguage = $rootScope.language || 'en_US';
if (localizedTexts[currentLanguage].hasOwnProperty(text)) {
return localizedTexts[currentLanguage][text];
}
return text;
};
}])
// separate dictionary file
angular.module('localization')
.value('localizedTexts', {
'zh_CN' : {
'firstname': '名',
'lastname': '姓',
'address': '地址'
},
'en_US' : {
'firstname': 'First Name',
'lastname': 'Last Name',
'address': 'Home Address'
}
});
|
效果如圖
