AngularJS Input Radio



  • input [radio] is one of the AngularJS input directive in module ng.
  • AnguarJS directive input [radio] is used to create an HTML radio button.
  • radio button is a graphical element that allows the user to choose only one option.
  • This directive executes at priority level 0.

Syntax for input [radio] directive in AngularJs:

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

Parameter Values:

Parameter Type Description
ngModel
String
Defines angular expression to data-bind to.
value
String
To set the value to which the ngModel expression should be set when selected.value parameter only supports string values.
name (optional)
String
Name of the form under which the control is available
ngChange (optional)
String
An expression of Angular to be executed when input changes due to user interaction with the input element.
ngValue
String
In Angular expression to which ngModel will be set when the radio button is selected. Use ngModel instead of value attribute.

Sample coding for input[radio] directive in AngularJS

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
                angular.min.js"> </script>
    </head>
    <body>
        <form ng-app="myApp"  ng-controller="radioCtrl">
            <h3>input[radio] directive example in AngularJS</h3>
            <input type="radio" ng-model="choice" value="true">
            Choice A :
            <input type="radio" ng-model="choice" ng-value="specialValue" >
            Choice B:
            <input type="radio" ng-model="choice" value="false" >
            Choice C:
            <p>Value = {{choice }} </p>
        </form>        
        <script>
            var app = angular.module("myApp", []);
            app.controller('radioCtrl', ['$scope', function($scope) {
                $scope.specialValue = {
                    "id": "123",
                    "value": "true",
                };
            }]);
        </script>
    </body>
</html>

Code Explanation input[radio] directive in AngularJS:

Code Explanation for AngularJS Input Radio

  1. The ng-app specifies the root element (“myapp”) to define AngularJS application.
  2. Ng-controller specifies the application controller in AngularJS the controller value is given as “radioCtrl”.
  3. “radio” is declare the type value of the <input> tag.
  4. The ng-model bind an input field value to AngularJS application variable (“choice”).
  5. ng-value is used of value of an input element. Here “specialValue” is declare the ng-value of an <input> tag.
  6. The value is given as { “id”=”123”, “value”=”true” } in the scope object.

Sample Output input[radio] directive in AngularJS:

Sample Output1 for AngularJS Input Radio

  1. If the user click the choice A button and the output displays value as “true”. since Value=”true” is given in the <input> tag.
Sample Output2 for AngularJS Input Radio

  1. If user click the choice B and the output will be displays as Value ={“id”:”123”,”value”:”true”} because here we declare the ng-value as a “specialValue”.
Sample Output3 for AngularJS Input Radio

  1. If the user click the choice C button and the output displays value as “false” since Value=”false” is given in the <input> tag.

Related Searches to angularjs input[radio] directive