AngularJS ng-change Directive

Last Updated : 01 Aug, 2022

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 <input>, <textarea>, <checkbox> and <select>.

Syntax:

<element ng-change="expression"> 
    Contents... 
</element>

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

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-change Directive</title>
    <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 Directive</h2>
       
        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

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-change Directive</title>
    <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">GeeksforGeeks</h1>
    <h3>ng-change Directive</h3>
    <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>