AngularJS: API: ng/directive/input[radio]


input[radio]

  1. - input in module ng

HTML radio button.

Directive Info

  • This directive executes at priority level 0.

Usage

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

Arguments

ParamTypeDetails
ngModelstring

Assignable angular expression to data-bind to.

valuestring

The value to which the expression should be set when selected.

name
(optional)
string

Property name of the form under which the control is published.

ngChange
(optional)
string

Angular expression to be executed when input changes due to user interaction with the input element.

ngValuestring

Angular expression which sets the value to which the expression should be set when selected.

Example

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

  expect(color.getText()).toContain('blue');

  element.all(by.model('color')).get(0).click();

  expect(color.getText()).toContain('red');});