Introduction:

Hello everyone! Today my topic is to see the use of AngularJS ng-change directive. This is another directive of AngularJS library. The AngularJs ng-change directive is basically used to make change in particular control. We learned about ng-controller directive in my previous lecture Controller directive in AngularJS with scope inheritance. So the AngularJS ng-change directive needs a script. I shall make an angular “module” and assign it a name. Then after that I shall make a “controller” function for AngularJS ng-change directive module. This controller function will contain the name and a function inside it. In this function I shall call “$scope” as we learned earlier. This $scope will help to write the logic in this function. So what are we doing here? We want to see the use of AngularJs ng-change directive.

Now inside the logic portion I shall create a new “variable” with the help of $scope as we learned earlier. I shall “initialize” it with zero(0). Now inside this logic portion I shall shall create another “function” with the help of “$scope”. In the logic portion of this new function I shall make a new “variable” with $scope and this will be an “incremental variable”, that will increase it’s value on every “click”. Simple I created a check function which will do increment of the variable.

More going or further detail I shall make this in coding and images for your ease. I shall make new project for this, you all know how to make a new project, if you don’t just visit my previous lecture AngularJS Development – Hello Word.

 

Step 1) AngularJs ng-change directive Project built up:

So what we need for this. You know how to make a new project for AngularJS ng-change directive. We need a HTML file type only. Because I shall write my script inside it in head portion.

The Script will be like this:

Description:

Some of you will be thinking what is this? So I shall make it easy for you. This is the script that we will write in the head portion of the HTML file of AngularJS ng-change directive.

This script consists of a module “angular.module” , which is stored inside a variable named as “mymodule” same as of module(it helps in the coding).

Then I made a controller function for the module, it will control it. I the first portion I assigned a name to my controller function as “change” related to my topic, you can pick what ever you like to. As per in the second portion I wrote a function which contain $scope (if you don’t know why I did it, see previous lectureController directive in AngularJS with scope inheritance). This $scope will create the logic portion for me.

Inside this logic portion with the help of $scope I created a new variable named “clickCounter” and initialized it with zero(0).

Now what I need? I need a function to do increment on every click. We know that with the help of $scope we can make function also in the logic portion. I named the function as “click” and the logic of this function is a incremental variable.

 

Step 2) The HTML Code:

As I told you before we need the HTML code for our AngularJs ng-change directive. Because this library is used with the HTML. The body of HTML file is shown below:

Description:

What we see here? This is the body portion of the HTML file of AngualrJS ng-change directive. All you can see that I assigned a directive named ng-app inside the body tag as a property. This tag will act like an owner of AngularJs ng-change directive script.

Inside the body tag I took an “div” tag which contains further four tags. First two are “input” tags and then a “label” tag and in the last another “div” tag.

To the input tags I assigned a “type=checkbox” property to both of then. After that I used an AngularJS directive ng-model as a property. As we know ng-model directive is used for binding.

In the first input tag I assigned AngularJS ng-change directive and gave it a name check. This is that variable in which I stored a function containing incremental variable.

Inside the label tag I wrote a simple text and I wrote the name of ng-model directive to tell the code that bind this.

In the last div tag I bind the variable “clickCounter”.

 

Step 3) The whole Code:

This is the whole code I combined it for your ease.

Description:

Why I did this? I did it for your help. Some time few users feel difficulty in combining the portions of the code, so I did that for you. You can just copy this code from here and paste it into your file and then just run it into you browser.

You can also make to pages one of HTML and the other or AngularJS ng-change directive containing the script.

Then just link them together by calling the source of the script page in the script tag and place it in the head portion of HTML file.

Always keep in mind that write the script of AngularJS library in the head portion of HTML otherwise the code will not run. The images are shown below for you view to understanding.

 

Step 4) Image Description:

a) The Display Image:

The images are shown below.

AngularJS ng-change directive

Description:

In the above image is our main display of HTML file which is being controlled by AngularJs ng-change directive. What we see in it? We see two checkboxes with the simple text I wrote.

In the second line the other text I wrote with the parameter to bind the model, which contains the name of my ng-model. It will tell weather the checkboxes are checked or not by showing true and false.

The last statement will do the count that how many time does the first checkbox in clinked.

“Remember the counter will the number of times the box in clicked not the number of time it is checked”.

b) Working of Second Checkbox:

This image below will show the view if second checkbox is clicked. As we know both the checkboxes are linked to each other so they will be checked together.

 AngualrJS ng-change directive

 Description:

In the above picture I clicked the second check box and what it did? It checked the both checkboxes at a time and the true appeared in the end of second statement.

Take a closer look, the counter shown zero still. I told you earlier that it will only count that how many time the first checkbox is clicked. On clicking it again both the checkboxes will be unchecked.

c) Working of First Checkbox:

This image will show you that how the counter variable will work on clicking the first checkbox and it will show the counter value increasing.

AngularJs ng-change directive

AngularJs ng-change directive

Description:

What we have now? This time we see two pictures. The first picture shows that the first checkbox is clicked, as you know both will be checked together due to linkage.

What is the important part? The important and interesting part is that the counter shows the value “1” which means the checkbox is clicked once with a display of true.

While in the second picture the counter tell that the first checkbox is clicked “6” times and why is it false? It is false because the boxes are unchecked. This is how AngularJS ng-change directive works.

 

Precautions:

“Things to keep in mind. The names inside the module and the functions are case sensitive. So be careful while writing them and using them inside the HTML or functions. The script of AngularJS must be placed inside the head of HTML file. The most important the ng-app directive must be called, otherwise the code will not show the required display or output”.

 

Conclusion:

So what we learned today? We learned how to use AngularJS ng-change directive in side our HTML code with the help of controller function. I make a module and placed that module in a variable. Then I called a controller function to control that module. Inside that controller function I passed the $scope for writing my logic.

In the logic portion with the help of $scope I created a variable and initialized it with zero(0).

Then I made a new function with the help of $scope and made a variable for my increments, in the logic portion of this function. It will control the count.

Inside the HTML I defined the body tag as the owner of the AngularJS ng-change directive code. By assigning it the name I assigned in the module. Inside it I took some further tags.

The two checkboxes linked together and in their property I passed the other directive of AngularJs ng-model for binding purpose. While in the first checkbox I called another directive also, named ng-change. AngularJS ng-change directive will control the change in the code.

Inside the label tags I bound the model directive by the name I assigned to it.

In the last I bound the variable.