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
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
-
- <head>
- <title>Devmeal.com</title>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head>
-
- <body ng-app="pluralizeSampleApp">
- <div ng-controller="PluralController">
- <div class="container">
- <div class="well">
- <ng-pluralize count="people.length" when="{'0': 'Nobody is seeing.',
- '1': '{{people[0].name}} is viewing.',
- '2': '{{people[0].name}} and {{people[1].name}} are seeing.',
- 'one': '{{people[0].name}}, {{people[1].name}} and one other person are seeing.',
- 'other': '{{people[0].name}}, {{people[1].name}} and {{people.length-2}} other people are seeing.'}"> </ng-pluralize>
- </div>
- <pre>{{people}}</pre> </div>
- </div>
- <script>
- var app = angular.module("pluralizeSampleApp", []);
- app.controller('PluralController', ['$scope', function($scope) {
- $scope.people = [{
- name: "Jack"
- }, {
- name: "Denial"
- }, {
- name: "Liza"
- }, {
- name: "Dimko"
- }, {
- name: "Rossy"
- }, {
- name: "Luzy"
- }, {
- name: "Amik"
- }];
- }]);
- </script>
- </body>
-
- </html>