Post
Ask Question

Ng-Pluralize Directive AngularJS

This blog will help you understand the use of ng-Pluralize directive of AngularJS.

I have demonstrated the functionality of ng-Pluralize with an example. So, let's start with an array named as people.

As we see on Facebook, we have numbered likes on a post but it is in some formatted way, like Abc, Xyz + 20 others liked your post.

So, let's start creating the same thing with the help of ng-Pluralize directive of AngularJS.
 
Click to see the output
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <title>Devmeal.com</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>  
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head>  
  8.   
  9. <body ng-app="pluralizeSampleApp">  
  10.     <div ng-controller="PluralController">  
  11.         <div class="container">  
  12.             <div class="well">  
  13.                 <ng-pluralize count="people.length" when="{'0': 'Nobody is seeing.',    
  14. '1': '{{people[0].name}} is viewing.',    
  15. '2': '{{people[0].name}} and {{people[1].name}} are seeing.',    
  16. 'one': '{{people[0].name}}, {{people[1].name}} and one other person are seeing.',    
  17. 'other': '{{people[0].name}}, {{people[1].name}} and {{people.length-2}} other people are seeing.'}"> </ng-pluralize>  
  18.             </div>  
  19.             <pre>{{people}}</pre> </div>  
  20.     </div>  
  21.     <script>  
  22.         var app = angular.module("pluralizeSampleApp", []);  
  23.         app.controller('PluralController', ['$scope', function($scope) {  
  24.             $scope.people = [{  
  25.                 name: "Jack"  
  26.             }, {  
  27.                 name: "Denial"  
  28.             }, {  
  29.                 name: "Liza"  
  30.             }, {  
  31.                 name: "Dimko"  
  32.             }, {  
  33.                 name: "Rossy"  
  34.             }, {  
  35.                 name: "Luzy"  
  36.             }, {  
  37.                 name: "Amik"  
  38.             }];  
  39.         }]);  
  40.     </script>  
  41. </body>  
  42.   
  43. </html> 
Next Recommended Reading ng-Disabled Directive in AngularJS