AngularJS ng-Value Directive

The AngularJS ng-value directive is used to binds the given AngularJS expression to the value of input[radio] element. It is useful when generating radio button list using ng-repeat.

Syntax

<label ng-repeat="name in names" for="{{name}}">
{{name}}
<input type="radio" ng-model="favorite.color" 
ng-value="name"
id="{{name}}" name="color">
</label>

AngularJS ng-Value Directive Example

<!DOCTYPE html>    
<html>    
<head> <!-- www.techstrikers.com -->    
<title>ngValue Test Sample</title>    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>    
    
<script>    
  var app = angular.module('ValueExample', [])
    app.controller('ValueController', ['$scope', function($scope) {
      $scope.names = ['Red', 'Blue', 'Green','Yellow','White','Black'];
      $scope.favorite = { color: 'Green' };
    }]);  
</script>    
</head>    
<body style="background-color:#DDE4E9;" ng-app="ValueExample">    
  <fieldset style="background-color:#DDE4E9;">      
    <legend>AngulerJS ngValue Example</legend>      
<div ng-controller="ValueController">
  <form name="myform">
    
    <label ng-repeat="name in names" for="{{name}}">
       {{name}}
       <input type="radio" ng-model="favorite.color" ng-value="name"
              id="{{name}}" name="color">
     </label>
    <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;">
	You Selected - {{favorite.color}}</div>  
  </form>
</div>
      </fieldset>     
</body>    
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-Value Directive

AngularJS ng-Value Directive Example

Recent Articles