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: