AngularJS: API: ng/directive/ngPluralize

ngPluralize

- directive in module ng

ngPluralize指令依照en-US本地化规则显示信息。这些规则和angular.js捆绑在一起，但是可以被覆盖(参见 Angular i18n 开发指南)。配置ngPluralize指令的方式是通过给出多元化条目和显示字符串的映射实现的。

多元化条目和显式数字规则

有两个多元化条目在Angular的默认en-US本地化中: "one"和"other"。

一个多元化条目可以匹配多个数字(例如，在en-US本地化中，"other"可以匹配除1以外的任何数字)，一条显式数字规则只能匹配一个数字，例如，显式数字规则"3"只能匹配数字3。本文档的后面有很多多元化条目和显示数字规则的示例。

配置ngPluralize

你可以使用2个属性配置ngPluralize: count 和 when。你还能使用可选的属性offset。

count属性的值可以是字符串或一个Angular表达式；它会在绑定值的当前域上运算。

when属性指定多元化条目和实现显示字符串的映射关系。属性值可以是JSON对象。

下面的例子演示如何配置ngPluralize:

<ng-pluralize count="personCount"
                 when="{'0': 'Nobody is viewing.',
                     'one': '1 person is viewing.',
                     'other': '{} people are viewing.'}">
</ng-pluralize>

在例子中， "0: Nobody is viewing." 是一条显式数字规则。如果你未指定这条规则，0会被匹配到"other"条目，并且"0 people are viewing"会替代"Nobody is viewing"显示出来。你可以为其它数字指定一条显式数字规则，例如12，这样可以替代"12 people are viewing"的显示，你可以显示成"a dozen people are viewing"。

你可以使用一对花括号({}) 作为数字的占位符，将数字代入到多元化字符串中。在前一个例子中，Angular会替换{} 为 {{personCount}}。成对花括号{}作为{{numberExpression}}的点位符。

使用offset配置ngPluralize

offset 属性允许进一步定制化多元化文本，可以产生一个更好的用户体验。例如，替代信息"4 people are viewing this document"，你可以显示为"John, Kate and 2 others are viewing this document"。offset属性允许你使用任何所需的值来偏移一个数字。让我们来看一个例子：

<ng-pluralize count="personCount" offset=2
              when="{'0': 'Nobody is viewing.',
                     '1': '{{person1}} is viewing.',
                     '2': '{{person1}} and {{person2}} are viewing.',
                     'one': '{{person1}}, {{person2}} and one other person are viewing.',
                     'other': '{{person1}}, {{person2}} and {} other people are viewing.'}">
</ng-pluralize>

注意这里仍然使用了两条多元化条目(one, other)，但是我们增加了三条显式数字规则 0, 1 和 2。当一个人，也许是John，看了这个文档，将会显示"John is viewing"。当三个人看了这个文档，非显式数字规则被找到，因为偏移2后为3，Angular使用1来检索多元化条目。在这种情况下，多元化条目 'one'被匹配到，并且"John, Mary and one other person are viewing"被显示。

注意当你指定偏移时，你必须给从0到偏移值的数字提供显式数字规则。例如，如果你使用偏移值3，你必须提供显式数字规则 0, 1, 2 和3。同时你也必须为多元化条目提供多元化字符串 "one" and "other"。

指令信息

这个指令执行优先级为0.

用法

作为元素使用: (这个指令能用于自定义元素，但要注意IE限制)。
```
<ng-pluralize
  count=""
  when=""
  [offset=""]>
...
</ng-pluralize>
```

作为属性使用:

<ANY
  count=""
  when=""
  [offset=""]>
...
</ANY>

参数

参数	类型	详述
count	stringexpression	要绑定的变量。
when	string	多元化条目和对应字符串的映射。
offset (可选)	number	从总数扣减的偏移值。

示例

index.html

<script>
  angular.module('pluralizeExample', [])
    .controller('ExampleController', ['$scope', Function($scope) {
      $scope.person1 = 'Igor';
      $scope.person2 = 'Misko';
      $scope.personCount = 1;
    }]);
</script>
<div ng-controller="ExampleController">
  Person 1:<input Type="text" ng-model="person1" value="Igor" /><br/>
  Person 2:<input Type="text" ng-model="person2" value="Misko" /><br/>
  Number of People:<input Type="text" ng-model="personCount" value="1" /><br/>

  <!--- Example with simple pluralization rules for en locale --->
  Without Offset:
  <ng-pluralize count="personCount"
                when="{'0': 'Nobody is viewing.',
                       'one': '1 person is viewing.',
                       'other': '{} people are viewing.'}">
  </ng-pluralize><br>

  <!--- Example with offset --->
  With Offset(2):
  <ng-pluralize count="personCount" offset=2
                when="{'0': 'Nobody is viewing.',
                       '1': '{{person1}} is viewing.',
                       '2': '{{person1}} and {{person2}} are viewing.',
                       'one': '{{person1}}, {{person2}} and one other person are viewing.',
                       'other': '{{person1}}, {{person2}} and {} other people are viewing.'}">
  </ng-pluralize>
</div>

protractor.js

it('should show correct pluralized string', Function() {
  var withoutOffset = element.all(by.css('ng-pluralize')).get(0);
  var withOffset = element.all(by.css('ng-pluralize')).get(1);
  var countInput = element(by.model('personCount'));

  expect(withoutOffset.getText()).toEqual('1 person is viewing.');
  expect(withOffset.getText()).toEqual('Igor is viewing.');

  countInput.clear();
  countInput.sendKeys('0');

  expect(withoutOffset.getText()).toEqual('Nobody is viewing.');
  expect(withOffset.getText()).toEqual('Nobody is viewing.');

  countInput.clear();
  countInput.sendKeys('2');

  expect(withoutOffset.getText()).toEqual('2 people are viewing.');
  expect(withOffset.getText()).toEqual('Igor and Misko are viewing.');

  countInput.clear();
  countInput.sendKeys('3');

  expect(withoutOffset.getText()).toEqual('3 people are viewing.');
  expect(withOffset.getText()).toEqual('Igor, Misko and one other person are viewing.');

  countInput.clear();
  countInput.sendKeys('4');

  expect(withoutOffset.getText()).toEqual('4 people are viewing.');
  expect(withOffset.getText()).toEqual('Igor, Misko and 2 other people are viewing.');});
it('should show data-bound names', Function() {
  var withOffset = element.all(by.css('ng-pluralize')).get(1);
  var personCount = element(by.model('personCount'));
  var person1 = element(by.model('person1'));
  var person2 = element(by.model('person2'));
  personCount.clear();
  personCount.sendKeys('4');
  person1.clear();
  person1.sendKeys('Di');
  person2.clear();
  person2.sendKeys('Vojta');
  expect(withOffset.getText()).toEqual('Di, Vojta and 2 other people are viewing.');});