Handling Radio Buttons in Angular Forms

Updated on     Kisan Patel

This tutorial will explain you how to handle radio buttons in Angular Form.

For radio button group, we define all radio buttons have the same name, called course. We also define Angular model with the same name, i.e.: student.course

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>AngularJs Demo</title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
   <script type="text/javascript">
        var myModule = angular.module("app", []);

        myModule.controller('studentController', function ($scope) {

             $scope.student = {};

             $scope.submit = function () {
                alert("You have selected: " + $scope.student.course);
             };
        });
   </script>
</head>
<body>
    <div ng-app="app" ng-controller="studentController">
       <form name="myForm" ng-submit="submit()">
         <div>
            <label>Student Course</label>
            <input type="radio" name="course" id="course1" value="HTML" ng-model="student.course"> HTML
            <input type="radio" name="course" id="course2" value="CSS" ng-model="student.course"> CSS
            <input type="radio" name="course" id="course3" value="JavaScript" ng-model="student.course"> JavaScript
         </div>
         <input type="submit" value="Submit">
        </form>
      </div>
</body>
</html>

Output

angularjs-demo


AngularJS

Leave a Reply