Show / Hide Table of Contents
Close
Loading …
There was an error loading this resource. Please try again later.
 Improve this Doc  View Source

input[radio]

  1. - input in module ng
Contents

Overview

HTML radio button.

Note:
All inputs controlled by ngModel (including those of type radio) will use the value of their name attribute to determine the property under which their NgModelController will be published on the parent FormController. Thus, if you use the same name for multiple inputs of a form (e.g. a group of radio inputs), only one NgModelController will be published on the parent FormController under that name. The rest of the controllers will continue to work as expected, but you won't be able to access them as properties on the parent FormController.

In plain HTML forms, the name attribute is used to identify groups of radio inputs, so that the browser can manage their state (checked/unchecked) based on the state of other inputs in the same group.

In AngularJS forms, this is not necessary. The input's state will be updated based on the value of the underlying model data.

If you omit the name attribute on a radio input, ngModel will automatically assign it a unique name.

Directive Info

  • This directive executes at priority level 0.

Usage

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

Arguments

Param Type Details
ngModel string

Assignable AngularJS expression to data-bind to.
value string

The value to which the ngModel expression should be set when selected. Note that value only supports string values, i.e. the scope model needs to be a string, too. Use ngValue if you need complex models (number, object, ...).
name
(optional)
 string

Property name of the form under which the control is published.
ngChange
(optional)
 string

AngularJS expression to be executed when input changes due to user interaction with the input element.
ngValue string

AngularJS expression to which ngModel will be be set when the radio is selected. Should be used instead of the value attribute if you need a non-string ngModel (boolean, array, ...).

Example

<script>
  angular.module('radioExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.color = {
        name: 'blue'
      };
      $scope.specialValue = {
        "id": "12345",
        "value": "green"
      };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>
    <input type="radio" ng-model="color.name" value="red">
    Red
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" ng-value="specialValue">
    Green
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" value="blue">
    Blue
  </label><br/>
  <tt>color = {{color.name | json}}</tt><br/>
 </form>
 Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.