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>