Angular Translate:如何处理单数和复数单词?

时间:2015-03-19 10:04:42

标签: angularjs angular-translate

我正在使用Angular Translate。这是翻译字符串的最简单方法,其中一个单词必须根据单数或复数来改变?喜欢"加上10分" vs." 1分加上"?

2 个答案:

答案 0 :(得分:1)

Angular-Translate已具备此功能。此页面上有说明和示例:http://angular-translate.github.io/docs/#/guide/14_pluralization

答案 1 :(得分:0)

从页面示例中,我尝试了“消息格式”,但添加插值使我的代码无法正常工作。问题出在这一行:

$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>