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