ng-change evaluate the expression as we change the value of the input. The expression with ng-change evaluate only when a new value of the input cause and committed to the model. The ng-model directive needs to be present to evaluate the expression of ng-change directive. The expression with ng-change directive will not evaluate if we change the model programmatically but not change the input value. Let's understand with an example of ng-change directive:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
<input type="checkbox" ng-model="checked" ng-change="incrementCount()" />
The value of checkbox change {{count}} times.
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.count = 0;
$scope.incrementCount = function() {
$scope.count += 1;
};
});
</script>
</body>
</html>
ng-change directive will watch the value of checkbox , As we change the value of checkbox the ng-change directive call the incrementCount() function and this function will increase the value of {{ count }} variable. The value of {{ count }} changed immediately when checkbox changed from checked to un-checked or un-checked to checked. We can use ng-change directive also on textbox, select list etc.
ng-style directive used to apply CSS style conditionally on the HTML elements. For example if you want to change the color of the text on click event of the button then you can easily do this with the help of ng-style directive. Let's understand with a simple example of ng-style directive:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<button ng-click="msgStyle={'color':'#5cb85c'}">Success Message</button>
<button ng-click="msgStyle={'color':'#d9534f'}">Danger Message</button>
<button ng-click="msgStyle={'color':'#5bc0de'}">Info Message</button>
<button ng-click="msgStyle={'color':'#f0ad4e'}">Warning Message</button>
<h1 ng-style="msgStyle">Hi! Reagan.</h1>
</div>
</body>
</html>
In the above example ‘msgStyle’ apply to the <h1> tag using ng-style directive. On the button click we change the style of ‘msgStyle’ for example for the Success Message in the first button we set the color property to green.
ng-pluralize directive is used to display messages according to the count. The value of count can be either string or an angular expression.
You can provide two attributes to the ng-pluralize directive “count” and “when”. You can also provide “offset” as an optional attribute.
There are mainly two categories which are used with this directive “one” and “other”. Category “one” shows message at the count of when offset is subtracted from the count value and gives 1 as answer. For example offset is 2 and it shows message when value of count is 3. The category “other” shows message when count is not matched with the value defined by the “when” attribute. Lets see the example to understand this directive properly.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
<button ng-click="personLike=personLike+1">Like</button>
<ng-pluralize count="personLike"
when="{'0': '0 person like this.',
'1': '1 person like this.',
'other': '{} persons like this.'}">
</ng-pluralize>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.personLike = 0;
});
</script>
</body>
</html>
See this example, ng-pluralize directive has two attributes “count” and “when”. The initial value of personLike variable is Zero and when the value is zero it shows “0 person like this.” as we define that when value is zero shows this message in the “when” attribute. In the other category the value of braces { } replaced by the count. We increase the value of {{ personLike }} on the click of the Like button same as the facebook Like button. The expression of when attribute must be a json object. Lets see the another example with offset attribute.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
<button ng-click="personLike=personLike+1">Like</button>
<ng-pluralize count="personLike"offset="2"
when="{'0':'0 person like this.',
'1': '{{person1}} like this.',
'2': '{{person1}} and {{person2}} like this.',
'one': '{{person1}}, {{person2}} and one other like this.',
'other': '{{person1}}, {{person2}} and {} other like this.'}">
</ng-pluralize>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.personLike = 0;
$scope.person1 = "Jackie";
$scope.person2 = "Erwin";
});
</script>
</body>
</html>
In this example we give value of offset attribute is 2. Now if the value of {{personLike}} variable is 1 then it shows “ Jackie like this.” Because we print {{person1}} like this and the value of person1 variable is “ Jackie ”.If value of {{ personLike }} variable is 2 then it shows “ Jackie and Erwin like this.” Now see the example we show message for “1” and also for “one”. Understand the difference between “1” and “one” . The “1” shows message {{ person1 }} like this when value of {{ personLike }} variable is 1 and “one” shows message “{{ person1 }}, {{ person2 }} and one other like this.” When value of variable {{ personLike }} is 3. Means when we subtract offset value from the count and it gives 1 as answer ( personLike – offset = 1 ) ( 3-2 = 1 ). The last message of other pluralize category shows when the value of {{ personLike }} variable is more than 3. For example when value of {{ personLike }} variable is 4 it shows “Jackie, Erwin and 2 other like this”. The value of braces { } replaced with the {{ personLike – offset }} as we shows name for the two persons.