AngularJS ng-change Event with Checkbox, Select, Text Example

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.

AngularJS ng-change Event Directive

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. 

Syntax of AngularJS ng-change Event

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.

AngularJS ng-change Event Example

Following is the example of using ng-change event with input text control to call function when input control value changed in angularjs applications.

 

Live Preview

<!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.

Output of AngularJS ng-change Event Example

Following is the result of using ng-change event with input text control in angularjs applications.

 

Angularjs ng-change event with example result or output

AngularJS ng-change Event with checkbox Example

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.

 

Live Preview

<!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.

Output of AngularJS ng-change Event with Checkbox Example

Following is the result of using ng-change event with checkbox example in angularjs application.

 

Agnularjs ng-change event with checkbox example to show or hide elements example result or output

AngularJS ng-change with Select Dropdown Example

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.

 

Live Preview

<!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.

Output of AngularJS ng-change event with Dropdown List

Following is the result of using ng-change event with select / dropdown list in angularjs applications.

 

Angularjs ng-change event with select / dropdownlist with example result or output

This is how we can use ng-change event in input textbox control, select and checkboxes to raise event or function in angularjs applications.