LearnKode

4 Example(s) of Ng-Value


Description :

Selected category with ng-value bind to my.favourite which display the text with selected category.


Ng-Value Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <h3>Which is your favorite ?</h3>
    <div ng-controller="controllerName">
        <div ng-repeat="category in categories">
            <input type="radio" ng-model="my.favorite" ng-value="category" name="learnIt"> {{category}}
        </div>
        <pre>You Selected:{{my.favorite}}</pre>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.categories = ['AngularJs', 'Jquery', 'Bootstrap', 'JavaScript'];
        $scope.my = { favorite: 'AngularJs' };
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example id of the selected language with ng-value directive bind to the ctrl.selected and displayed below it when you select the language.


Ng-Value Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <h3>Which is your favorite ?</h3>
    <div ng-controller="controllerName">
        <label ng-repeat='item in list'>
            <input name="selected" type="radio" ng-model="ctrl.selected" ng-value="item.id"> {{item.name}}
        </label>
        <pre>
             Id of selected item's id is  = {{ctrl.selected}}
       </pre>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.ctrl = { selected: '1' };
        $scope.list = [{ id: '', name: 'AngularJs' }, { id: '1', name: 'JavaScript' }, { id: 'Null', name: 'Bootstrap' }, { id: '""', name: 'Jquery' }];
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example selected car with ng-value directive bind to the my.favorite and displayed below it when you select the car.


Ng-Value Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <h3>Which is your favorite ?</h3>
    <div ng-controller="controllerName">
        <label ng-repeat="car in cars">
            <input type="radio" ng-model="my.favorite" ng-value="car">{{car}}
        </label>
        <pre>
        Your Favourite Car is:   = {{my.favorite}}
       </pre>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.cars = ['AUDI', 'BMW', 'MERCEDES'];
        $scope.my = { favorite: 'AUDI' };
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example true and false with ng-value bind to the bool variable and display along with AAA. Similarly Yes and No for BBB bind with Bool variable and selected value display with BBB.


Ng-Value Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <h3>Which is your favorite ?</h3>
    <div>
        <table>
            <tr>
                <td>AAA:<b>{{bool}}</b></td>
                <td>True:<input type="radio" name="bool" ng-value="true" ng-model="bool" /></td>
                <td>False:<input type="radio" name="bool" ng-value="false" ng-model="bool" /></td>
            </tr>
            <tr>
                <td>BBB:<b>{{Bool}}</b></td>
                <td>Yes:<input type="radio" name="course1" ng-value="'Yes'" ng-model="Bool" /></td>
                <td> No:<input type="radio" name="course1" ng-value="'No'" ng-model="Bool" /></td>
            </tr>
        </table>
    </div>
</body>
</html>
Try it » Download Example »

Output