Skip to content
Related Articles

Related Articles

AngularJS ng-pluralize Directive

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Aug, 2022
View Discussion
Improve Article
Save Article

The ng-pluralize Directive in AngularJS is used to specify the message to display according to the en-us localization rules. The en-us localization rules are bundled with AngularJS. The default plural category in AngularJS is “one” and “other”. 

Syntax: The ng-pluralize Directive can be used:

As element:

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

As attribute:

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

Parameter Values:

  • count: It refers to the value of the count attribute which is used by Angular expression.
  • when: It is used to specify the mapping between the actual string and the plural categories. The attribute value must be in JSON object style.
  • offset: It specifies the offset attribute to deduct from the total number.

Example 1: This example uses the ng-pluralize Directive to display content. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-pluralize Directive</title>
    <script src=
    </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>

Output:

 

 Example 2: This example uses the ng-pluralize Directive to display the input text content. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-pluralize Directive</title>
    <script src=
    </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>

Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!