June 21, 2016

AngularJs get radio button value

AngularJs get radio button value – While using the html form input elements we sometimes need radio button or even sometimes we need user to select the one option from the radio button. It is very simple to get the select radio button value in angularjs. Here in this tutorial we are going to explain how you can get the selected radio button value. You can also use our online editor to edit and run the code online.

AngularJs get radio button value

Let us go step by step-

JavaScript Part

JavaScript Part Contains the following part as below –

AngularJs get radio button value in controller:

<script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {

 $scope.selectedGender = '';
 $scope.getRadioButtonValue = function(gender) {
     // copy data	 
	 alert(gender);
	 $scope.selectedGender = angular.copy(gender);
 };
});
</script>

Html Part

Html Part contains the following html as below –

AngularJs get radio button value in View:

<div ng-app="myApp">  
<div ng-controller="myController">  
<form action="javascript:void(0)">
        Male: <input type="radio" name="userGender" ng-model='gender' checked value="Male"/><br />
        Female : <input type="radio" name="userGender" ng-model='gender' value="Female" /><br />
        
        <button ng-click="getRadioButtonValue(gender)">Get Value</button>
 </form>
 <p>Selected Gender = {{selectedGender}}</p>
 
</div> 
</div>

Complete Part

Now let us combine both html and JavaScript parts –

AngularJs get selected radio button value Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
 <script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {
$scope.selectedGender = '';
 $scope.getRadioButtonValue = function(gender) {
     // copy data	 
	 alert(gender);
	 $scope.selectedGender = angular.copy(gender);
 };
});
</script>
</head>
<body>  
<div ng-app="myApp">  
<div ng-controller="myController">  
<form action="javascript:void(0)">
        Male: <input type="radio" name="userGender"  ng-model='gender' checked value="Male"/><br />
        Female : <input type="radio" name="userGender"  ng-model='gender' value="Female" /><br />
        
        <button ng-click="getRadioButtonValue(gender)">Get Value</button>
 </form>
 <p>Selected Gender = {{selectedGender}}</p>
 
</div> 
</div>
</body>  
</html>

Try it »

If you run the above example it will produce output something like this –

AngularJs get radio button value