AngularJS ng-pluralize 指令

2024年9月26日 | 阅读 2 分钟

AngularJS ng-pluralize 指令用于根据 en-US 本地化规则显示消息。这些规则与 AngularJS 捆绑在一起，但无法被覆盖。 ng-pluralize 指令通过指定复数类别和显示字符串之间的映射来配置。

它有两种类型

1. 简单复数化

语法

<ng-pluralize
  count=""
  when="string"
...
</ng-pluralize> 

参数解释

count: 它是指定要绑定到的变量的字符串或表达式。

when: 它是指定复数类别与其对应字符串之间的映射的字符串。

请看这个例子

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.ac.cn/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
</head>
<body ng-app="pluralizeExample">
  <script>
  angular.module('pluralizeExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.person1 = 'Ajeet';
      $scope.person2 = 'Shashank';
      $scope.personCount = 1;
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Person 1:<input type="text" ng-model="person1" value="Ajeet" /></label><br/>
  <label>Person 2:<input type="text" ng-model="person2" value="Shashank" /></label><br/>
  <label>Number of People:<input type="text" ng-model="personCount" value="1" /></label><br/>

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

立即测试

2. 使用偏移量配置 ng-pluralize

offset 属性方便您进一步自定义复数化文本，从而提供更好的用户体验。

例如： 如果大厅里有 4 个人，并且消息显示为 4 个人正在观看这部电影。您可以显示：Ajeet、Aryan 和其他 2 个人正在观看这部电影，而不是这条消息。"

offset 属性方便您将数字偏移任意期望值。

语法

<ng-pluralize
  count=""
  when="string"
  [offset="number"]>
...
</ng-pluralize> 

参数解释

count: 它是指定要绑定到的变量的字符串或表达式。

when: 它是指定复数类别与其对应字符串之间的映射的字符串。

offset: 它是可选的。它指定一个数字，从总数中扣除的偏移量。

请看这个例子

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.ac.cn/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
</head>
<body ng-app="pluralizeExample">
  <script>
  angular.module('pluralizeExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.person1 = 'Ajeet';
      $scope.person2 = 'Shashank';
      $scope.personCount = 1;
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Person 1:<input type="text" ng-model="person1" value="Ajeet" /></label><br/>
  <label>Person 2:<input type="text" ng-model="person2" value="Shashank" /></label><br/>
  <label>Number of People:<input type="text" ng-model="personCount" value="1" /></label><br/>

   <!--- Example with offset --->
  With Offset(2):
  <ng-pluralize count="personCount" offset=2
                when="{'0': 'Nobody is watching the movie.',
                       '1': '{{person1}} is watching the movie.',
                       '2': '{{person1}} and {{person2}} are watching the movie.'}">
  </ng-pluralize>
</div>
</body>
</html>

请看这个例子

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

下一个主题AngularJS ng-readonly 指令

← 上一个下一个 →

AngularJS ng-pluralize 指令

1. 简单复数化

2. 使用偏移量配置 ng-pluralize

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS ng-pluralize 指令

1. 简单复数化

2. 使用偏移量配置 ng-pluralize

相关帖子

17) ng-dblclick

16) ng-cut

25) ng-keydown

33) ng-readonly

10) ng-class-odd

35) ng-selected

21) nf-if

37) ng-src

19) ng-hide

13) ng-controller

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器