Here we will learn what is ng-change event directive in angularjs, use ng-change event with input text control with example, how to use ng-change event with checkbox in angulajrs and use ng-change event with select / dropdownlist with example in angularjs applications.
In angularjs ng-change event is used to raise or call function whenever the value of input element changes. We can use this angularjs ng-change event with input elements like textboxes, checkboxes, dropdowns and textarea control elements.
Generally this angularjs ng-change event will trigger for every change in the value of input controls and it’s very useful for us to call a function or raise event whenever input text changes.
Following is the syntax of using ng-change event in angularjs applications.
<element ng-change="expression">
...your code...
</element>
In angularjs ng-change event is supported by <input>, <select>, <textarea> elements and ng-change event will not override original onchange event of input controls both will raise separately during execution.
Following is the example of using ng-change event with input text control to call function when input control value changed in angularjs applications.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-change Event Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngchangeApp', []);
app.controller('ngchangeCtrl', function ($scope) {
$scope.count = 0;
$scope.getdetails = function () {
$scope.count = $scope.count + 1;
}
});
</script>
</head>
<body>
<div ng-app="ngchangeApp" ng-controller="ngchangeCtrl">
<h2>AngularJs ng-change Event Example</h2>
<input type="text" ng-change="getdetails()" ng-model="txtval" /><br /><br />
<span style="color:Red">No. of Times Input Changes: {{count}}</span>
</div>
</body>
</html>
If you observe above example we added ng-change event to input textbox control and it will raise event whenever we change the value of input text control in angularjs application.
Following is the result of using ng-change event with input text control in angularjs applications.
In angularjs we can apply ng-change event to checkbox. Following is the example of using ng-change event with checkbox in angularjs application.
Here we are going to show / hide dive elements with checkbox selection using ng-change event in angularjs applications.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-change Event with Checkbox Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngchangeApp', []);
app.controller('ngchangeCtrl', function ($scope) {
$scope.getdetails = function () {
if ($scope.chkselct == true)
$scope.result = true;
else
$scope.result = false;
}
});
</script>
</head>
<body>
<div ng-app="ngchangeApp" ng-controller="ngchangeCtrl">
<h2>Show / Hide Div Elements with Checkbox</h2>
Show / Hide Div <input type="checkbox" ng-change="getdetails()" ng-model="chkselct"><br /><br />
<div style="padding:10px; border:1px solid black; width:30%; font-weight:bold" ng-show='result'>Hi Welcome to Tutlane.com... Angularjs</div>
</div>
</body>
</html>
If you observe above example we are calling function getdetails() in checkbox ng-change event and we are showing / hiding div elements with checkbox selection in angularjs application.
Following is the result of using ng-change event with checkbox example in angularjs application.
In angularjs we can apply ng-change event to input select or dropdown element. Following is the example of using ng-change event with dropdown list in angularjs application.
Here we will show / hide elements based on dropdown list selection item by using ng-change event directive in angularjs applications.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-change Event with Select / Dropdownlist Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngchangeApp', []);
app.controller('ngchangeCtrl', function ($scope) {
$scope.arrlist = [{
"userid": 1,
"name": "Suresh"
}, {
"userid": 2,
"name": "Rohini"
}, {
"userid": 3,
"name": "Praveen"
}];
$scope.getdetails = function () {
if ($scope.userselected.userid == "2")
$scope.result = true;
else
$scope.result = false;
}
});
</script>
</head>
<body>
<div ng-app="ngchangeApp" ng-controller="ngchangeCtrl">
<h2>AngularJS ng-change Event with Dropdownlist</h2>
<select name="users" ng-options="user.name for user in arrlist" ng-change="getdetails()" ng-model="userselected">
<option value="">--Select User--</option>
</select><br /><br />
<div style="padding:10px; border:1px solid black; width:30%; font-weight:bold" ng-show='result'>Hi Welcome to Tutlane.com... Angularjs</div>
</div>
</body>
</html>
If you observe above example we are showing or hiding div element based on dropdown list selected value using ng-change event in angularjs application.
Following is the result of using ng-change event with select / dropdown list in angularjs applications.
This is how we can use ng-change event in input textbox control, select and checkboxes to raise event or function in angularjs applications.