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
