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= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </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= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> 
    </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>