Angular Translate: 如何处理单词的单复数?
Angular Translate: How to handle singular and pluralis words?
我正在使用 Angular Translate。这是翻译字符串的最简单方法,其中单词必须根据单数或复数变化?喜欢“增加 10 分”还是“增加 1 分”?
Angular-翻译已经有这个能力了。此页面有说明和示例:http://angular-translate.github.io/docs/#/guide/14_pluralization
根据页面示例,我尝试使用 "message-format",但添加插值会使我的代码无法工作。问题出在这一行:
$translateProvider.addInterpolation('$translateMessageFormatInterpolation');
虽然这不是最优雅的获取方式,但它有效:
app.js
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.preferredLanguage('en');
//$translateProvider.addInterpolation('$translateMessageFormatInterpolation');
$translateProvider.translations('en', {
POINTS1: '{{val}} point added',
POINTSN:'{{val}} points added',
POINTS: '{NUM, select, one{point} morethanone{points}} added.'
});
$translateProvider.translations('es', {
POINTS1: '{{val}} punto añadido',
POINTSN:'{{val}} puntos añadidos',
POINTS: '{NUM, select, one{punto} morethanone{puntos} añadidos.'
});
}]);
app.controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {
$scope.points = 10;
$scope.one_point = function () {
return points === 1;
};
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
}]);
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<!--script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script-->
<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/messageformat.js"></script>
<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/locale/de.js"></script>
<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/locale/fr.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="http://rawgithub.com/angular/bower-angular-cookies/master/angular-cookies.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-interpolation-messageformat/master/angular-translate-interpolation-messageformat.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-storage-cookie/master/angular-translate-storage-cookie.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-storage-local/master/angular-translate-storage-local.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-handler-log/master/angular-translate-handler-log.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-show="Ctrl.one_point()">
<p translate="POINTS1" translate-values="{ val: {{points}} }"></p>
</div>
<div ng-show="!Ctrl.one_point()">
<p translate="POINTSN" translate-values="{ val: {{points}} }"></p>
</div>
<button ng-click="changeLanguage('es')" translate="BUTTON_LANG_ES"></button>
<button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
</div>
</body>
</html>
我正在使用 Angular Translate。这是翻译字符串的最简单方法,其中单词必须根据单数或复数变化?喜欢“增加 10 分”还是“增加 1 分”?
Angular-翻译已经有这个能力了。此页面有说明和示例:http://angular-translate.github.io/docs/#/guide/14_pluralization
根据页面示例,我尝试使用 "message-format",但添加插值会使我的代码无法工作。问题出在这一行:
$translateProvider.addInterpolation('$translateMessageFormatInterpolation');
虽然这不是最优雅的获取方式,但它有效:
app.js
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.preferredLanguage('en');
//$translateProvider.addInterpolation('$translateMessageFormatInterpolation');
$translateProvider.translations('en', {
POINTS1: '{{val}} point added',
POINTSN:'{{val}} points added',
POINTS: '{NUM, select, one{point} morethanone{points}} added.'
});
$translateProvider.translations('es', {
POINTS1: '{{val}} punto añadido',
POINTSN:'{{val}} puntos añadidos',
POINTS: '{NUM, select, one{punto} morethanone{puntos} añadidos.'
});
}]);
app.controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {
$scope.points = 10;
$scope.one_point = function () {
return points === 1;
};
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
}]);
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<!--script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script-->
<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/messageformat.js"></script>
<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/locale/de.js"></script>
<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/locale/fr.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="http://rawgithub.com/angular/bower-angular-cookies/master/angular-cookies.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-interpolation-messageformat/master/angular-translate-interpolation-messageformat.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-storage-cookie/master/angular-translate-storage-cookie.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-storage-local/master/angular-translate-storage-local.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-handler-log/master/angular-translate-handler-log.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-show="Ctrl.one_point()">
<p translate="POINTS1" translate-values="{ val: {{points}} }"></p>
</div>
<div ng-show="!Ctrl.one_point()">
<p translate="POINTSN" translate-values="{ val: {{points}} }"></p>
</div>
<button ng-click="changeLanguage('es')" translate="BUTTON_LANG_ES"></button>
<button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
</div>
</body>
</html>