AngularJS ng-pluralize指令

AngularJS中的ng-pluralize指令被用来指定根据en-us本地化规则显示的信息。en-us本地化规则是与AngularJS捆绑在一起的。AngularJS中默认的复数类别是 “一个 “和 “其他”。

语法：可以使用ng-pluralize指令。

作为元素:

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

作为属性:

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

参数值:

count：它指的是Angular表达式所使用的count属性的值。
when：它用于指定实际字符串和复数类别之间的映射。属性值必须是JSON对象风格。
offset：它指定了要从总数中扣除的偏移属性。

例子1：这个例子使用ng-pluralize指令来显示内容。

<!DOCTYPE html>
<html>
  
<head>
    <title>ng-pluralize Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
</head>
  
<body ng-app="app" style="padding:20px">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h2>ng-pluralize Directive</h2>
    <div ng-controller="geek">
        <div ng-init="Hotel=[0, 1, 2, 3]"> Choose from list:
            <select ng-model="booking" 
                ng-options="booking as booking for booking in Hotel">
            </select><br><br>
            <ng-pluralize count="booking" when="{
                    '0':'No booking available',
                    '1':'{{booking}} booking available',
                    '2':'{{booking}} bookings available',
                    '3':'{{booking}} bookings available',
                    }"> </ng-pluralize>
        </div>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['scope', function(scope) {
            $scope.booking = 0;
        }]);
    </script>
</body>
</html>

输出:

AngularJS ng-pluralize指令

示例2：本例使用ng-pluralize指令来显示输入文本内容。

<!DOCTYPE html>
<html>
  
<head>
    <title>ng-pluralize Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
</head>
  
<body ng-app="app" style="text-align:center">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h2 style="">ng-pluralize Directive</h2>
    <div ng-controller="geek">
        <p>Input Names separated by comma(, ):</p>
        <textarea class="form-control" 
                  ng-model="people" 
                  ng-list=", ">
        </textarea><br><br>
        <ng-pluralize count="people.length" offset="2" when="{
            '0': 'You got no viewers.',
            '1': '{{people[0]}} is viewing.',
            '2': '{{people[0]}} and {{people[1]}} are viewing.',
            'one': '{{people[0]}}, {{people[1]}} and one other
                    person is viewing.',
            'other': '{{people[0]}}, {{people[1]}} and {}
                    other people are viewing.'}"> 
          </ng-pluralize>
    </div>
    
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['scope', function(scope) {
            $scope.people = [];
        }]);
    </script>
</body>
</html>