Hello Friends, In this tutorial we are going to learn ng-change directive in Angular Js. Unlike onchange event of JavaScript ng-change directive evaluates the expression immediately whereas onchange event triggers at the of change when the input field loses its focus.
Introduction:
The ng-change directive specifies that what to do when any changes in the value of the HTML element occurs. ng-change directives evaluate the expression immediately whereas JavaScript onchange event triggers at the end of the change when input field loses its focus. ng-change directives need the ng-model directive to be present. ng-change event triggers only if actual changes in the input field occur not changes made from JavaScript.
Syntax:
<element ng-change="expression"></element>
Parameter explanation:
expression: It specifies an expression that needs to evaluate when a change in the value of element occurs.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>
Angular Js Demo
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.Counter = function() {
$scope.count++;
};
}]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Enter something in the input field:</p>
<input type="text" ng-change="Counter()" ng-model="myValue" />
<p>The input field has changed {{count}} times.</p>
</div>
</body>
</html>
You can view the demo of the above application here.
Example 2:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular Js Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<div class="col-md-3 well" ng-init="count=0">
Courses: <select ng-change="ngChangeCount()" class="form-control" ng-model="course" ng-options="cr.course as cr.course for cr in courses"></select>
<pre> ({{course}}) ng-Change {{count}} </pre>
</div>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myCtrl', ['$scope', function ($scope) {
$scope.course = "Angular";
$scope.courses = [{ course: ".NET" }, { course: "SQL Server" }, { course: "Angular Js" }];
$scope.ngChangeCount = function () {
$scope.count = $scope.count + 1;
}
}]);
</script>
</body>
</html>
You can view the demo of Example 2 here.
Hope you have understood what is ng-change directive in Angular Js and what is the difference between an onchange event of Javascript and ng-change directive in Angular Js.
View More:
- ng-app directive in Angular Js.
- ng-model Directive in Angular Js.
- ng-bind-template directive in Angular Js.
- ng-bind-html directive in Angular Js.
- ng-bind-template directive in Angular Js.
- ng-blur Directive in Angular Js.
Thank You.
