©
Dieses Dokument verwendetPHP-Handbuch für chinesische WebsitesFreigeben
ngPluralize
指令依照en-US本地化规则显示信息。这些规则和angular.js捆绑在一起,但是可以被覆盖(参见 Angular i18n 开发指南)。配置ngPluralize指令的方式是通过给出多元化条目和显示字符串的映射实现的。
有两个多元化条目在Angular的默认en-US本地化中: "one"和"other"。
一个多元化条目可以匹配多个数字(例如,在en-US本地化中,"other"可以匹配除1以外的任何数字),一条显式数字规则只能匹配一个数字,例如,显式数字规则"3"只能匹配数字3。本文档的后面有很多多元化条目和显示数字规则的示例。
你可以使用2个属性配置ngPluralize:count
和when
。你还能使用可选的属性offset
。
count
属性的值可以是字符串或一个Angular表达式;它会在绑定值的当前域上运算。
when
属性指定多元化条目和实现显示字符串的映射关系。属性值可以是JSON对象。
下面的例子演示如何配置ngPluralize:
count="personCount"when="{'0': 'Nobody is viewing.', 'one': '1 person is viewing.', 'other': '{} people are viewing.'}">
在例子中,"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
属性允许进一步定制化多元化文本,可以产生一个更好的用户体验。例如,替代信息"4 people are viewing this document",你可以显示为"John, Kate and 2 others are viewing this document"。offset属性允许你使用任何所需的值来偏移一个数字。让我们来看一个例子:
count="personCount"offset=2when="{'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.'}">
注意这里仍然使用了两条多元化条目(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"。
count=""when=""[offset=""]>...
count=""when=""[offset=""]>...
参数 | 类型 | 详述 |
---|---|---|
count | stringexpression | 要绑定的变量。 |
when | string | 多元化条目和对应字符串的映射。 |
offset
(可选)
|
number | 从总数扣减的偏移值。 |
angular.module('pluralizeExample',[]).controller('ExampleController',['$scope',Function($scope){$scope.person1='Igor';$scope.person2='Misko';$scope.personCount=1;}]);ng-controller="ExampleController">Person 1:Type="text"ng-model="person1"value="Igor"/>
Person 2:Type="text"ng-model="person2"value="Misko"/>
Number of People:Type="text"ng-model="personCount"value="1"/>
Without Offset:count="personCount"when="{'0': 'Nobody is viewing.', 'one': '1 person is viewing.', 'other': '{} people are viewing.'}">
With Offset(2):count="personCount"offset=2when="{'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.'}">
it('should show correct pluralized string',Function(){varwithoutOffset=element.all(by.css('ng-pluralize')).get(0);varwithOffset=element.all(by.css('ng-pluralize')).get(1);varcountInput=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(){varwithOffset=element.all(by.css('ng-pluralize')).get(1);varpersonCount=element(by.model('personCount'));varperson1=element(by.model('person1'));varperson2=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.');});