How to get the value of radio button using AngularJS ? - GeeksforGeeks

27 Jan, 2022
In this article, we will see how to get the radio button’s value with the help of AngularJS. In this article, we will use the ng-model to get the value of the checked radio button. 
Example 1: In this example, the selected value is shown with an alert.
HTML
<!DOCTYPE HTML><html> <head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </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>       <p>        How to get the radio button        value in AngularJS    </p>       <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:
Before clicking on the button:
After clicking on the button:
Example 2: In this example, the selected value is shown in a <p> tag.
HTML
<!DOCTYPE HTML><html> <head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </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>       <p>        How to get the radio button        value in AngularJS    </p>       <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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
sweetyty
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular PrimeNG Dropdown Component
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?