Introduction

Hello Everyone!

Today I am here to tell you about another important directive of AngularJS. AngularJS value directive is the directive we will use today to meet our goal. AngularJS value directive is actually used to change the value of ng-model at run time, because it is attached to it.

Now what do we need, to make our goal. We will make a project and in the project I shall take a HTML file. Because you know AngularJS is applied on HTML. If you don’t know how to make a new project? Do read my previous lecture “AngularJS Development – Hello Word“. Now we need javascript to handle our AngularJS value directive code and AngularJS library source is required as you all know this. Before going on further detail lets come to the point.

Outlines

  • New Project
  • Important Points
  • AngularJS Library Source
  • JavaScript
  • HTML Code
  • AngularJS Value Directive Code
  • Images
  • Precautions
  • Conclusion

Description

These are the steps which we will follow to make AngularJS Value Directive code. Now what should we do? We shall make new project for this purpose. Then insert the library script and javascript in it. After this, insert the directives of AngularJS in it to run the code. Follow the following steps.

 New Project

First we need a new project to do our coding. I told before the way of making new project. If you don’t know then do visit my previous lecture “AngularJS Development – Hello Word“.

 Important Points

  •  ng-app

It is the main directive required for every app of AngularJS. I described it in previous lecture “AngularJS Development – Hello Word“. Do visit them.

  •  ng-controller

It is also defined in previous lecture “Controller directive in AngularJS with scope inheritance“. The controller which controller the module of javascript.

  •  ng-model

As you know before, what is the function of this directive. If you don’t, do visit my previous lecture “AngularJS ng-change directive use with simple script“. It will help you in detail.

  •  ng-repeat

This directive gives the list of values stored. It repeats the items. This instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item. I deals like a collection and runs like a for each loop. I shall use it to generate a multiple set of label at run time.

  •  ng-value

This is our main focused directive of today. AngularJS value directive changes the value of ng-model at run time.  The ng-value directive is useful when dynamically generating lists of radio buttons using ng-repeat directive.

  •  JavaScript

As you know AngularJS is the library of javascript. So It requires so script to handle it’s code. It contains a module and a controller function for controlling this module. Inside the controller function a new function containing the logic. $scope will be passed in this function for writing the logic.

  • $scope

 It is a predefined object of AngularJS as I explained it in my previous lecture “Controller directive in AngularJS with scope inheritance“. Do visit it.

 AngularJS Library Source

As you know we need AngularJS library source in every AngularJS app to make it work properly. So The below script is the source of AngularJS library to make AngularJS value directive work.

Description

This script must be added in the header so that the could can get the source and work properly. If you don’t add this the code will not work at all.

 JavaScript

The below code is the script required of AngularJS value directive implementation.

Description

So what do we have here? The above code is showing the javascript containing a module. I named my module as “mymodule“.I placed the module inside a variable as per the same name of the module. Now as you know I needed a predefined controller function to handle my module. I named my controller function as “x“. You can give names what ever you like to but remember these names while reusing them.

Now inside the function I created another function and passed $scope object init. Now I am able to write my logic in this function. In the logic portion of AngularJS value directive script I made to properties. With the help of $scope I took a variable and named is as “cars“. The first property contains an array list consisting of three brands of cars. While the second property with the help of $scope I named it “my”. Init I am selecting one brand as favorite. actually favorite is the property which I shall be accessing in my HTML.

 HTML Code of AngularJS Value Directive

As you all know AngularJS only works inside the HTML file. So we needed the HTML for AngularJS include directive code. The required HTML code is shown below.

Description

This is the basic HTML code which we need for AngularJS value directive. If you see inside the body tag, I placed a div tag. Then inside this div tag I placed a heading tag, label and another div tag. The label tag contains an input tag which is a radio button.

The below image will show you the display of this HTML file.

AngularJS value directive

This is the display of our HTML file without including AngularJS.

The further detail is provided in my next lecture.

Do visit this “AngularJS value directive implementation continued” to see the whole implementations.