ng-change directive in angularJS

The ng-change directive

  • The angularJS ng-change directive is used with the input fields like textboxes, textarea, select, etc.,
  • It evaluates the given expression as the value is changed by the user.
  • As such, JavaScript also supports onchange event where you may perform a certain action as the value in an input field is changed. However, the difference and benefit of using the ng-change is that the given expression is evaluated immediately after the value is changed.
  • The onchange event occurs or you may perform a certain action as a user leaves the input field or presses the enter/return key (generally).
  • However, as the ng-change enables us to perform certain stuff as soon as the change is made (as a user is within the input element), this can be beneficial for different scenarios.
Also, note that the ng-Change expression is checked only for the new value. If the value is not changed the expression will not be evaluated. For example, in a textbox, the value 5 is entered. The user deletes the value after selecting it and enters 5 again.

Besides, the ng-change works with ng-model directive; so, as a new value is committed to the model, the expression is checked.

Syntax of using ng-change directive

Following is the general syntax of using the ng-change directive in AngularJS:

<input type=”text” ng-change=”expression”></input>

Where the input can be any HTML element like textbox, checkbox, etc. You may also use textarea and select elements.

A demo of np-change with textbox

In this demo, a textbox is given for entering some text. As you start entering text, the lower div will be updated with the number of times the text is entered or np-change occurred. Note that, it also includes deletion of characters after entering the text.

angularjs ng change

The code:

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body ng-app="ngchangedemo">
    <div ng-controller="ngchangedemoController">
        <div class="container">
        <h3>A demo of ng-change</h3>
            <div class="col-sm-4 well" ng-init="changed=0">
                Enter some text:  <input type="text" class="form-control" ng-change="someText()" ng-model="text" />
                <div><b>Total number of times change occured:</b> {{changed}<!--Remove this while  testting-->}</code> </div>
            </div>
        </div>
    </div>
<script>
    var app = angular.module("ngchangedemo", []);
    app.controller('ngchangedemoController', ['$scope', function ($scope) {
        $scope.isChange = false;
        $scope.someText = function () {
            $scope.isChange = true;
            $scope.changed = $scope.changed + 1;
        }
    }]);
</script>
</body>
</html>

In the <head> section, the Angular and Bootstrap libraries are included.

In the demo, you may also test a point mentioned in the intro section that np-change evaluates as a new value is committed to the model. For that, enter a text like “5” in the textbox. Select “5” and reenter.

A demo with checkbox

In this example, the np-change is used with the checkbox. The div below the checkbox will be updated by the number of times the checkbox is checked or unchecked.

See the live demo and press checkbox and see how it updates:

angularjs ng change checkbox

The code:

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body ng-app="ngchangedemo">
    <div ng-controller="ngchangedemoController">
   
      <div class="form-group" ng-init="changed=0">
        <div class="col-sm-offset-2 col-sm-10 well">
        <h3>A demo of ng-change</h3>
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-change="chkChanged()" ng-model="text" > Remember me
              <div><b>Total number of times checkbox pressed</b> {{changed}<!--Remove this while  testting-->} </div>
            </label>
          </div>
        </div>
      </div>
        </div>
        
<script>
    var app = angular.module("ngchangedemo", []);
    app.controller('ngchangedemoController', ['$scope', function ($scope) {
        $scope.isChange = false;
        $scope.chkChanged = function () {
            $scope.isChange = true;
            $scope.changed = $scope.changed + 1;
        }
    }]);
</script>
</body>
</html>

An example of using ng-change with select dropdown

In this example, an HTML select dropdown is used with a few options. Inside the select tag, the ng-change directive is used.

Whereas, inside the controller, the value of number of times the value is selected is incremented by one.

angularjs-ng change select

The code:

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body ng-app="ngchangedemo">
    <div ng-controller="ngchangedemoController">
   
      <div class="form-group" ng-init="changed=0">
        <div class="col-sm-offset-2 col-sm-10 well">
        <h3>A demo of ng-change</h3>
          <div class="checkbox">
            <label>
              <select ng-change="chkChanged()" class="form-control" ng-model="selectDemo">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              </select>
              <div><b>Total number of times options selected</b> {{changed}<!--Remove this while  testting-->} </div>
            </label>
          </div>
        </div>
      </div>
        </div>
        
<script>
    var app = angular.module("ngchangedemo", []);
    app.controller('ngchangedemoController', ['$scope', function ($scope) {
        $scope.isChange = false;
        
        $scope.chkChanged = function () {
            $scope.isChange = true;
            $scope.changed = $scope.changed + 1;
        }
    }]);
</script>
</body>
</html>

An example to show/hide an HTML table using ng-change

In this example of explaining how ng-change directive works, I have used an HTML table that is styled with Bootstrap classes.

Initially, the table is hidden as web page loads. As you click the “Show/Hide table” checkbox, it will display. Upon clicking it again, the table will hide.

angularjs ng-change table

The code:

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body ng-app="ngchangedemo">
    <div ng-controller="ngchangedemo">
        <div class="container">
            <div class="col-md-3 well">
                Show/Hide Table: <input type="checkbox" ng-model="showhidetable" ng-change="SHTable(showhidetable)" /> <br>
            </div>
            
                <table class="table table-bordered table-striped" ng-show='showhideprop'>
                  <tr>
                      <th>Product ID</th>
                      <th>Product Name</th>
                      <th>Product Quality</th>
                      <th>Product Quantity</th>
                  </tr>
                  <tr>
                      <td>1</td>
                      <td>Wheat</td>
                      <td>Good</td>
                      <td>200 Bags</td>
                  </tr>
                  <tr>
                      <td>2</td>
                      <td>Rice</td>
                      <td>Good</td>
                      <td>250 Bags</td>
                  <tr>
                      <td>3</td>
                      <td>Sugar</td>
                      <td>Good</td>
                      <td>200 Bags</td>
                  </tr>  
                </table>
            
            
        </div>
    </div>
<script>
    var app = angular.module("ngchangedemo", []);
    app.controller('ngchangedemo', ['$scope', function ($scope) {
        $scope.SHTable = function (showhidetable) {
            $scope.showhideprop = showhidetable;
        }
    }]);
</script>
</body>
</html>

You can see that the status of the table is checked with each click of the checkbox in the controller. If this is hidden, the table will display, and vice versa.