Open In App
Related Articles

How to get the value of radio button using AngularJS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we will see how to get the value of the radio button using AngularJS, along with understanding the basic implementation through illustrations. The value of the checked radio button can be fetched with the help of the ng-model directive that helps to bind the data with the specific element & stores the required value in a variable, that can be utilized whenever we require that particular value.

Example 1: In this example, the selected value will be rendered with an alert message, on clicking the button.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.selectedGender = '';
            $scope.getVal = function(gender) {
                alert(gender);
            };
        });
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3> How to get the radio button value in AngularJS </h3>
    <div ng-app="app">
        <div ng-controller="controller">
            <form action="javascript:void(0)"> Male:
                <input type="radio"
                       name="userGender"
                       ng-model='gender'
                       value="Male" />
                <br> Female :
                <input type="radio"
                       name="userGender"
                       ng-model='gender'
                       value="Female" />
                <br><br>
                <button ng-click="getVal(gender)">
                    Click here
                </button>
            </form>
        </div>
    </div>
</body>
</html>

                    

Output:

 

Example 2: In this example, the selected value is shown in a <p> tag using the Interpolation in AngularJS.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.selGender = '';
            $scope.getVal = function(gender) {
                $scope.selGender = angular.copy(gender);
            };
        });
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3> How to get the radio button value in AngularJS </h3>
    <div ng-app="app">
        <div ng-controller="controller">
            <form action="javascript:void(0)"> Male:
                <input type="radio"
                       name="userGender"
                       ng-model='gender'
                       value="Male" />
                <br> Female :
                <input type="radio"
                       name="userGender"
                       ng-model='gender'
                       value="Female" />
                <br><br>
                <button ng-click="getVal(gender)">
                     Click here
                </button>
            </form>
             
<p>Chosen Gender = {{selGender}}</p>
 
        </div>
    </div>
</body>
</html>

                    

Output:

 



Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads