AngularJS ng-pluralize Directive
Last Updated :
16 Aug, 2022
Improve
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.
<!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>
Output:
Example 2: This example uses the ng-pluralize Directive to display the input text content.
<!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>
Output:
