The ng-change Directive in AngularJS is used whenever the value of an input element changes. The expression is evaluated immediately whenever there is a change in the input value. It requires an ng-model directive to be present. It is triggered whenever there is any single change in the input. It can be used with input elements like , ,
Syntax:
Contents...
Parameter Value:
- expression: It refers to the expression to execute whenever the value of input changes.
Example 1: This example uses the ng-change Directive to display/hide some content using the checkbox.
<html>
<head>
<title>ng-change Directivetitle>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
script>
<script type="text/javascript">
var app = angular.module('geek', []);
app.controller('app', function ($scope) {
$scope.show = function () {
if ($scope.check == true)
$scope.result = true;
else $scope.result = false;
}
});
script>
head>
<body style="padding: 30px">
<div ng-app="geek" ng-controller="app">
<h1 style="color:green;">
GeeksforGeeks
h1>
<h2>ng-change Directiveh2>
Check to show/hide details
<input type="checkbox" ng-change="show()"-
ng-model="check">
<br><br>
<div style="padding:10px;
border:1px solid black;
width:30%;color:green"
ng-show='result'>
GeeksforGeeks is the computer
science portal for geeks.
div>
div>
body>
html>
Output:

Example 2: This example returns the number of times the state of the checkbox is changed and also the current state of the checkbox.
<html>
<head>
<title>ng-change Directivetitle>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
script>
head>
<body ng-app="geek" style="text-align:center">
<h1 style="color:green">GeeksforGeeksh1>
<h3>ng-change Directiveh3>
<div ng-controller="prop">
<div>
Are you a developer:
<input type="checkbox"
ng-model="isTrue"
ng-change="cnt=cnt+1"
ng-init="cnt=0" />
div>
Count: {{cnt}}
<pre>{{isTrue}}pre>
div>
<script>
var app = angular.module("geek", []);
app.controller('prop', ['$scope', function ($app) {
$app.isTrue = false;
}]);
script>
body>
html>
Output:
