AngularJS ng-value Directive
Last Updated :
24 Aug, 2022
The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> and <select> elements.
Syntax:
<element ng-value="expression">
Content ...
</element>
Parameter value:
- expression: It specifies the value that is bound with the element’s value attribute & value property. It is of string type.
Example 1: This example describes the basic usage of the ng-value Directive in AngularJS.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< style >
body {
text-align: center;
font-family: 'Times New Roman', Times, serif;
}
h1 {
color: green;
}
</ style >
</ head >
< body ng-app = "gfg" ng-controller = "geek" >
< h1 >GeeksforGeeks</ h1 >
< h3 >ng-value Directive</ h3 >
< input ng-value = "displayVal" >
< script >
var app = angular.module('gfg', []);
app.controller('geek', function ($scope) {
$scope.displayVal = "GeeksforGeeks";
});
</ script >
</ body >
</ html >
|
Output:
Example 2: This example describes the ng-value directive in AngularJS, where a value is selected from the list & correspondingly, rendering that value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-value Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "app" style = "padding:20px" >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h2 >ng-value Directive</ h2 >
< p >Choose one:</ p >
< div ng-controller = "geek" >
< div ng-repeat = "l in sort" >
< input type = "radio"
ng-model = "my.fav"
ng-value = "l"
name = "Sort" > {{l}}
</ div >
< pre >Selected choice is: {{my.fav}}</ pre >
</ div >
< script >
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.sort = [
'Merge Sort',
'Quick Sort',
'Bubble Sort'
];
$scope.my = { fav: 'Merge Sort' };
}]);
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...