ng-change Directive of AngularJS

Introduction

In my previous articles I told you about:

In this article I will tell you about the ng-change directive of AngularJS.

Step 1

First of all you need to add an external Angular.js file to your application, for this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link and download it: ANGULARJS.

After downloading the External File you need to add this file to the Head section of your application.

</head>

Step 2

Now I will work on the ViewModel or JavaScript part of this application, here I will create a function and pass some values through the $scope.

function x($scope) {

$scope.clickCounter = 0;

$scope.check = function () {

$scope.clickCounter++;

};

}

</script>

</head>

You can see that first I created a function named x(), in this function some initial values are passed, clickCounter is set to 0 at the start.

Then a "check" function is created that will increase the value of clickCounter every time it is triggered.

Our work on ViewModel is complete. Now we just need to work on the View part or design part of this application.

Step 3

Write this code in the Body tag:

<body>

<label for="text2">I am Working for Second CheckBox</label><br />

Checkboxes are Checked = {{model}}<br />

<div> counter = {{clickCounter}}</div>

</div>

</body>

Here you can see that first I have passed the function in the ng-controller of the Div.

After that I created two Checkboxes, in both the Checkboxes you can see that I passed the ng-model that is necessary if you want to use the ng-change directive in your application, but I had applied ng-change to Checkbox1 so the click counter will be incremented only on the click of the first checkbox.

After that, two labels are used, with the first Label "model" is bound and since it was bound to checkboxes it will either show a True value or a False value.

After this "clickCounter" is bound in a Div that will show the increment of the click counter.

Now our application is ready to be executed.

The complete code of this application is as follows:

function x($scope) {

$scope.clickCounter = 0;

$scope.check = function () {

$scope.clickCounter++;

};

}

</script>

</head>

<body>

<label for="text2">I am Working for Second CheckBox</label><br />

Checkboxes are Checked = {{model}}<br />

<div> counter = {{clickCounter}}</div>

</div>

</body>

</html>

Output

On running the application you will get output like this:

ng-change in AngularJS

As you can see, at this moment everything is in it's initial state, but as I click the first checkbox changes can be seen everywhere.

ng-change in AngularJS

You can see that the click counter is incremented by one, the second checkbox is automatically checked because both have the same model name, true is shown because the checkboxes are checked.

Now if I click on the Label present beside the second checkbox then you will see that it is also making the checkboxes checked and unchecked.

ng-change in AngularJS

This label is working for checkbox 2 because I have defined in my code as for="text2". You can see that "False" is also shown because the checkboxes are unchecked but the counter is not incremented because ng-change was only bound to the first checkbox.

ng-change in AngularJS

Now again as I click on first TextBox you can see that the counter is again incremented by one.