In this article I will explain with an example, how to get the selected value (checked value) of RadioButton inside Controller in AngularJS.
The status of the RadioButton i.e. checked or unchecked will be determined on Button click inside the AngularJS Controller.
AngularJS RadioButton value: Get selected value of RadioButton inside Controller in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The AngularJS app HTML DIV consists of two HTML RadioButtons set with ng-model directive and ng-value directive. The ng-model is set with a boolean model variable named HasPassport.
There is also an HTML Button set with ng-click directive.
When the Button is clicked, the CheckPassport function of the Controller gets called, which first checks the value of the model variable HasPassport and based on whether it is true or false it displays respective messages using JavaScript Alert message Box.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.CheckPassport = function () {
if (typeof ($scope.HasPassport) != "undefined") {
if ($scope.HasPassport) {
$window.alert("RadioButton YES is checked.");
} else {
$window.alert("RadioButton NO is checked.");
}
} else {
$window.alert("RadioButtons are not checked.");
}
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
Do you have Passport?
<label>
<input type="radio" ng-model="HasPassport" ng-value="true" />
Yes
</label>
<label>
<input type="radio" ng-model="HasPassport" ng-value="false" />
No
</label>
<input type="button" value="Check Passport" ng-click="CheckPassport()" />
</div>
</body>
</html>
Screenshot
Demo
Downloads