AngularJS ng-pluraliz Directive

by Online Tutorials Library July 22, 2022

AngularJS ng-pluralize Directive

The AngularJS ng-pluralize directive is used to display message according to en-US localization rules. These rules are bundled with AngularJS but cannot be overridden. The ng-pluralize directive is configured by specifying the mapping between plural categories and the displaying strings.

It is of two types:

1.Simple pluralization:

Syntax:

Parameter explanation:

count: It is a string or expession specifying the variable to be bound to.

when: It is a string specifying the mapping between plural category to its corresponding strings.

See this example:

         <meta charset="utf-8">    <script type="rocketlazyloadscript" data-rocket-src="../wp-content/static///ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>             
<div ng-controller="ExampleController">    <label>Person 1:<input ng-model="person1" type="text" value="Ajeet"></label><br>    <label>Person 2:<input ng-model="person2" type="text" value="Shashank"></label><br>    <label>Number of People:<input ng-model="personCount" type="text" value="1"></label><br>      Without Offset:          </div>
<p>      </p>

Test it Now

2.Configuring ng-pluralize with offset

The offset attribute facilitates you to further customization of pluralized text which provides better user experience.

For example: If there are 4 people in the hall and the message is displaying as 4 people are watching this movie. Instead of this message, you can display: Ajeet, Aryan and 2 others are watching this movie."

The offset attribute facilitates you to offset a number by any desired value.

Syntax:

Parameter explanation:

count: It is a string or expession specifying the variable to be bound to.

when: It is a string specifying the mapping between plural category to its corresponding strings.

offset: It is optional. It specifies a number, offset to deduct from the total number.

See this example:

         <meta charset="utf-8">    <script type="rocketlazyloadscript" data-rocket-src="../wp-content/static///ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>             
<div ng-controller="ExampleController">    <label>Person 1:<input ng-model="person1" type="text" value="Ajeet"></label><br>    <label>Person 2:<input ng-model="person2" type="text" value="Shashank"></label><br>    <label>Number of People:<input ng-model="personCount" type="text" value="1"></label><br>           With Offset(2):          </div>
<p>      </p>

See this example:

Next TopicAngularJS ng-readonly Directive

AngularJS ng-pluraliz Directive

AngularJS ng-pluralize Directive

1.Simple pluralization:

2.Configuring ng-pluralize with offset

Java StringBuilder class

C++ Math erf() Function

You may also like