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>

Output:

Vishal Chaudhary 2

Improve

Article Tags :

AngularJS ng-value Directive

Similar Reads

Thank You!

What kind of Experience do you want to share?