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">
  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>
  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>
  43. </html>