Description :
In this example, we have an array named people with names. Ng pluralize directive is useful when we need to give description based on the count for example if one like on facebook then for count 1 we need to show that One person like this. In the same way in this example for the count 0 it will show that Nobody is viewing for count 1 it will show name of the first person ie Messi is viewing.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</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="pluralizeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="well">
<ng-pluralize count="people.length" when="{'0': 'Nobody is viewing.',
'1': '{{people[0].name}} is viewing.',
'2': '{{people[0].name}} and {{people[1].name}} are viewing.',
'one': '{{people[0].name}}, {{people[1].name}} and one other person are viewing.',
'other': '{{people[0].name}}, {{people[1].name}} and {{people.length-2}} other people are viewing.'}">
</ng-pluralize>
</div>
<pre>{{people}}</pre>
</div>
</div>
<script>
var app = angular.module("pluralizeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.people = [{ name: "Messi" }, { name: "John" }, { name: "Emmi" }, { name: "Edvard" }, { name: "Kim" }, { name: "Kisdarm" }, { name: "wrwe" }];
}]);
</script>
</body>
</html>
Description :
In this example if you click on the like button icon then for first like the ng-pluralize directive will show that you likes and for two likes it will show You and Messi likes and for more than 3 like it will show You and name of two persons and for the rest it will simply show count.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="pluralizeExample">
<div ng-controller="ExampleController">
<div class="container">
<i class="fa fa-thumbs-up" style="color:skyblue;cursor:pointer" ng-click="count=count+1"></i>
<ng-pluralize count="count" when="{'0': '',
'1': 'You likes',
'2': 'You and {{people[0].name}} likes.',
'3': 'You , {{people[0].name}} and one other likes.',
'other': 'You , {{people[0].name}} , {{people[1].name}} and {{count-2}} other people likes.'}">
</ng-pluralize>
</div>
</div>
<script>
var app = angular.module("pluralizeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.count = 0;
$scope.people = [{ name: "Messi" }, { name: "John" }];
}]);
</script>
</body>
</html>
Description :
In this example we have a dropdown with the values from 0 to 3. If user select 0 then ng-pluralize directive will show No room available for count 1 it will show One room available and so on.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</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="pluralizeExample">
<div ng-controller="ExampleController">
<div class="container" ng-init="rooms=[0,1,2,3]">
<div class="col-md-3">
<select class="form-control" ng-model="room" ng-options="room as room for room in rooms"></select>
<ng-pluralize count="room" when="{'0':'No rooms available',
'1':'{{room}} rooms available',
'2':'{{room}} rooms available',
'3':'{{room}} rooms available',
}">
</ng-pluralize>
</div>
</div>
</div>
<script>
var app = angular.module("pluralizeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.room = 0;
}]);
</script>
</body>
</html>
Description :
In this example we have textarea to enter the names of the persons. Write comma seprated names in the textarea and the ng-pluralize directive will show about the entered names that these persons are viewing.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</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="pluralizeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3">
<p>Type in a list of comma ( , ) separated names.</p>
<textarea class="form-control" ng-model="people" ng-list=","></textarea>
<pre>{{people|json}}</pre>
<ng-pluralize count="people.length" offset="2" when="{
'0': 'Nobody is viewing.',
'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>
</div>
</div>
<script>
var app = angular.module("pluralizeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.people = [];
}]);
</script>
</body>
</html>