Introduction

I am here to tell you the implementations of AngularJS value directive which I explained in my previous lecture “AngularJS value directive implementation“. This lecture is linked to previous lecture for you help. It will tell you how and where to add the required directives in the HTML file. You can do copy from here and can run it into your browser.

Follow the following steps.

 AngularJS Value Directive Code

The below is the full code which is required for AngularJS value directive. You only need to do copy and paste.

Description

As you see in the above code, I placed the AngularJS library source in the head of HTML file. Then I placed my javascript in it which will control my functions of AngularJS include directive. Now take a closer look, I applied ng-app directive on the body to make it the owner of AngularJS include directive code and I passed the name of the module to make a bond.

In the div tag I applied ng-controller directive and placed the name of the controller function in it as “x” because it is to be controlled by it. In the heading tag I wrote a simple question statement. Now look closely inside the label tag I applied the directive ng-repeat. I gave it a name car which deals with the collection of cars in the array of the property “cars“. This we are doing for each loop type of thing and we will be displaying it in an expression. With each expression I placed a radio button, it is actually a model which is “my.favorite“. I simply means first time my model will be connected with the favorite which is “AUDI” so it will be selected.

After this I am actually working with ng-value directive which I named car. So when ever I wanted to change my car I change the value of my radio button. More moving on theory I want to show this with the help of images.

 Images

The following images will help you to know what we were doing so far.

AngularJS value directive

This is out out put. As you all can see there is a ratio button with every expression but only the last one is checked. This is because we placed it as favorite. And in the below statement it’s name appeared as favorite. Now as we select the other cars what will happen? Take a fast look on the below pictures.

 

AngularJS value directive

As you see I selected the other car and it appeared in the below statement as favorite. Same like this will be for the third car.

 

AngularJS value directive

On selecting the third car it become favorite. This select button is changing the values of the favorite car with the help of ng-value directive.

Description

So now you all know what we were doing so far. This is the use of ng-value directive with the help of ng-value directive.

 Precautions

Always place the script tag of source of AngularJS. Must define the ng-app directive. Always place “;” at the end of every statement inside the script. Be careful with the names you provide, they are care sensitive.

 Conclusion

So what do we get from it? We learned the use of AngularJS value directive and also learned the use of ng-repeat directive. It changes the value of ng-model at run time. If you have some questions or you something is missing in it so do comment it.