The ng-change in angularJS: 4 examples

The ng-change directive

The angularJS ng-change directive, which is used with the input fields like textboxes, textarea, select etc, evaluates the given expression as the value is changed by the user.

ng-change example – textbox checkbox demo

As such, the 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).

ng-change with dropdown

However, as the ng-change enables us performing 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

See online demo and code

The code:

<body ng-app="ngchangedemo">

    <div ng-controller="ngchangedemoController">

        <div class="container">

        <h3>A demo of np-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}} </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>

 

In the <head> section, the Angular and Bootstrap libraries are included. Get the complete code from the demo page.

In the demo, you may also test a point mentioned in 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 checkbox will be updated by the number of times checkbox is checked or unchecked. See the live demo and press checkbox and see how it updates:

angularjs ng change checkbox

See online demo and code

The code:

<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 np-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}} </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>

Get the complete code from the demo page.

A demo of using ng-change with select dropdown

In this demo, an HTML select dropdown is used with a few options. Inside the select tag, the ng-change directive is used. Inside the controller, the value of number of times the value is selected is incremented by one.

angularjs-ng change select

See online demo and code

The code:

<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 np-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}} </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>

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

In this demo of explaining how ng-change angularJS directive works, I have used an HTML table which 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. Have a look at the live demo by clicking the link or image below:

angularjs ng-change table

See online demo and code

The code used in demo:

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

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