AngularJS | ng-pluralize Directive

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:

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

Parameter Values:



  • count: It refers to the value of 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 ng-pluralize Directive to display content.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 style="">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>                    

chevron_right


Output:
Before selecting the element:
ngpluralize
After selecting the element:
ngpluralize

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before Input the Text:
ngpluralize
After Input the Text:
ngpluralize



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.