Radio buttons in AngularJS: How to get selected radio button value

Radio buttons in AngularJS: How to get selected radio button value

In this example, I will help to get checked radio button value in Angularjs App. We can get selected radio button value in controller of angular.

Here we will create simple example. we will create simple for and submit button. When you click on submit button then one angular controller method will call and we will get selected radio button value using Angularjs $scope variable.

Let's see bellow example, so you can use in your app.

Example:

<!doctype html>
<html>
<head>
  <title>How to get selected radio button value in AngularJS? - ItSolutionStuff.com</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-app='myapp'> <h1>How to get selected radio button value in AngularJS? - ItSolutionStuff.com</h1>

<div ng-controller="myCtrl"> <div class="radio"> <label><input type="radio" ng-model='sex' ng-value='"male"' name="sex">Male</label> </div> <div class="radio"> <label><input type="radio" ng-model='sex' ng-value='"female"' name="sex">Female</label> </div> <button ng-click="submitResult()">See Result</button> </div> </body>

<script type="text/javascript">

var app = angular.module('myapp', []);

app.controller('myCtrl', function ($scope, $location) {

  $scope.sex = 'male';

  $scope.submitResult = function() {

    alert($scope.sex);
  };

});

</script> </html>

I hope it can help you...

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about Angular and Web Workers

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Complete Node.js Developer Course (3rd Edition)

The Web Developer Bootcamp

Best 50 Angular Interview Questions for Frontend Developers in 2019

How to build a CRUD Web App with Angular 8.0

React vs Angular: An In-depth Comparison

React vs Angular vs Vue.js by Example

Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

Building CRUD Mobile App using Ionic 4, Angular 8

angular-js angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Angular Charts: How To Add Charts In Angular 9 Example

To use charts in Angular, we will use the chart.js library to construct the charts. We will fake the backend server for data and display it on charts.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

What are the best alternatives for angular js?

<img src="https://moriohcdn.b-cdn.net/193902114c.png">There are numerous frameworks and libraries used across the globe. If not angular, there are platforms like React, Vue, Aurelia and so on for app development.

Angular 8 Node & Express JS File Upload

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.