AngularJS Input Type Radio

The AngularJS input types are HTML input element control and used togather with ng-model directive. AngularJS input type Radio can be decorate with various AngularJS arguments like name,ng-value and ng-change.

Syntax

<input type="radio"
       ng-model="string"
       value="string"
       [name="string"]
       [ng-change="string"]
       ng-value="string">

AngularJS Input Type Radio Arguments

Here is a list of AngularJS Input Type Radio Arguments.

Directives	Description
ng-model	AngularJS expression to bind the radio.
name (optional)	Name of the control input control.
ng-value (optional)	AngularJS expression to bind value.
ng-change (optional)	AngularJS expression to be executed when input value changes.

AngularJS Input Type Radio Example

<!DOCTYPE html>  
<html>  
<head> <!-- www.techstrikers.com -->  
<title>AngularJS Input Type Radio</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>   
   <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>  
<script>  
  var app = angular.module('radioInputExample', [])  
     app.run(function($rootScope){  
      $rootScope.angular = angular;  
    })  
     app.controller('RadioController', ['$scope', function($scope) {  
       $scope.example = {  
         color:'yellow'
         };  
     }]);  
</script>  
</head>  
<body style="background-color:#DDE4E9;">  
  <fieldset style="background-color:#DDE4E9;">    
    <legend>AngulerJS Input Type Radio Example</legend>    
<div ng-app="radioInputExample">  
    <form name="myForm" ng-controller="RadioController">  
      <input type="radio" ng-model="example.color" value="yellow"/>
       <label for="exampleInput">Yellow</label><br/>  
       <input type="radio" ng-model="example.color" value="red"/> 
       <label for="exampleInput">Red</label>   <br/>
      <input type="radio" ng-model="example.color" value="blue"/> 
      <label for="exampleInput">Blue</label>  <br/>
        <p style="font-family:Arial;color:red;background:{{ example.color}};padding:3px;width:350px;"> </p>  
    </form>  
</div>  
      </fieldset>   
</body>  
</html>

Above example will produce following output