Introduction
In my previous articles I told you about:
This article explains the ng-Value directive of AngularJS.
ng-Value binds the input or checkbox control with some values, in this way it changes the bound value of ng-model with the currently selected value.
ng-Value mainly works with ng-Repeat when we are creating a dynamic List of values.
Now I will create a sample application that will help you understand this directive.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or 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 runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a simple application that will help you understand this directive.
First I will create a JavaScript function in which some initial values will be passed.
<script>
function x($scope) {
$scope.cars = ['AUDI', 'BMW', 'MERCEDES'];
$scope.my = { favorite: 'AUDI' };
}
</script>
Here I passed some initial car names in the "cars", then I selected "AUDI" as the default and favorite value.
Step 3
Our work on the View is completed and now I will work on the View Model of this application.
<body>
<div >
<form ng-controller="x">
<h4 id="favorite_CAR">Which is your favorite?</h4>
<label ng-repeat="car in cars" for="{{car}}">
{{car}}
<input type="radio" ng-model="my.favorite" ng-value="car">
</label>
<div>Your Favourite Car is: {{my.favorite}}</div>
</form>
</div>
</body>
The form is bound with the function name using the ng-controller, then a label is taken that will act as a Dynamic List, this label is bound using the ng-repeat directive.
Then a Label is taken whose type is set to checkbox, this will create dynamic checkboxes for each data that were declared in the initial values at the JavaScript function.
At the end a div is created in which some labels are bound with the selected checkbox value.
Now our application is ready for execution.
Output
On running the application you will see that AUDI will be selected as the default value as in the following:
![ng-value directive]()
This is because we had selected this value in the JavaScript function as the default value.
Now I can select any other value also and you can see that regarding changes are seen in the Label also:
![ng-value directive]()
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope) {
$scope.cars = ['AUDI', 'BMW', 'MERCEDES'];
$scope.my = { favorite: 'AUDI' };
}
</script>
</head>
<body>
<div >
<form ng-controller="x">
<h4 id="favorite_CAR">Which is your favorite?</h4>
<label ng-repeat="car in cars" for="{{car}}">
{{car}}
<input type="radio" ng-model="my.favorite" ng-value="car">
</label>
<div>Your Favourite Car is: {{my.favorite}}</div>
</form>
</div>
</body>
</html>