10

I have a few forms. Each form have a few possible radio buttons and a submit button. Only one radio button can be checked (using the same name attribute for each radio). How can I get the checked radio button's value when the form is submitted, using angularjs? @blesh advised to use the same ng-model for each input, but note that the problem is that the input tags are generated using ng-repeat, and this is where the problem starts. I need, of course, naturally, only one button for a bunch of inputs. It is well described in the following plunker, after playing with @blesh 's Answer: http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=preview In it, you can see that the alert shows the initial value and not the current selected input.

user2057574
  • 779
  • 2
  • 8
  • 12

4 Answers4

20

Your radio button's value will be available on whatever scope property you've assigned ng-model="" to on the input element. Try something like this:

JS

app.controller('MyCtrl', function($scope){ 
   $scope.submitForm = function (){
       alert($scope.radioValue):
   };

   $scope.radioValue = 1;
});

HTML

<form name="myForm" ng-controller="MyCtrl" ng-submit="submitForm()">
   <label><input type="radio" name="test" ng-model="radioValue" value="1"/> One</label>
   <label><input type="radio" name="test" ng-model="radioValue" value="2"/> Two</label>
   <label><input type="radio" name="test" ng-model="radioValue" value="3"/> Three</label>
   <div>currently selected: {{radioValue}}</div>
   <button type="submit">Submit</button>
</form>

And, so you can see it working, here is a plunker demonstrating the example

Ben Lesh
  • 107,825
  • 47
  • 247
  • 232
  • That's what I thought, but the value doesn't change and stays as it was initialized. What am I doing wrong? @blesh – user2057574 Mar 01 '13 at 21:11
  • Well, the ng-model, name and the value attributes are required on each radio input. Make sure those are there. Also make sure your inputs are inside a tag with the proper ng-controller reference. – Ben Lesh Mar 01 '13 at 21:58
  • I'm keeping playing with it, and can't seem to find the where the problem is. When I add {{radioValue}} to the html, I see the right current value, but when I submit the form, the alert shows the value from the initialization. @blesh – user2057574 Mar 01 '13 at 22:34
  • When I add {{radioValue}} to the ng-repeat, together with the radio input tag, the current value is changed only at the same entry, The others stay with the initial value, showing that $scope.radioValue is not changed "from the eyes" of the javascript file. @blesh – user2057574 Mar 01 '13 at 22:55
  • It seems problematic when using withing ng-repeat. PLEASE check out this plunker: http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=preview @blesh – user2057574 Mar 01 '13 at 23:37
  • 4
    After spending some time on reading, I used ng-model="$parent.radioValue", because ng-repeat creates an inner scope. Now it works. – user2057574 Mar 02 '13 at 00:43
  • Sorry, I had stepped away from my computer for the evening. I'm glad you found your solution. – Ben Lesh Mar 02 '13 at 03:46
  • Can you show us what you did to fix it using the $parent.radioValue? – Yeak Nov 10 '14 at 23:06
  • This works perfectly for me, thank you for sharing. I've tried so many different ways but this is the first way that's actually worked. – alsobubbly Jan 28 '15 at 10:22
18

just add $parent in ng-model .

<form name="myForm" ng-submit="submitForm()">
       <label data-ng-repeat="i in [1,2,3]"><input type="radio" name="test" ng-model="$parent.radioValue" value="{{i}}"/>{{i}}</label>
       <div>currently selected: {{radioValue}}</div>
       <button type="submit">Submit</button>
    </form>
Jethik
  • 1,860
  • 1
  • 22
  • 26
0

Combination with ng-value

app.controller('MyCtrl', function($scope){ 
   $scope.submitForm = function() {
      *****
   };
   $scope.radioBtn = {
    name: 'radioButton'
   };

   $scope.radioValueOne = {"id": "1", "value": "whatever you want"};
   $scope.radioValueTwo = {"id": "2", "value": "whatever you want"};
   $scope.radioValueThree = {"id": "3", "value": "whatever you want"};
});

<form name="myForm" ng-controller="MyCtrl" ng-submit="submitForm()">
   <label><input type="radio" name="test" ng-model="radioBtn.name" ng-value="radioValueOne"/> One</label>
   <label><input type="radio" name="test" ng-model="radioBtn.name" ng-value="radioValueTwo"/> Two</label>
   <label><input type="radio" name="test" ng-model="radioBtn.name" ng-value="radioValueThree"/> Three</label>
   <div>currently selected: {{radioBtn.name}}</div>
   <button type="submit">Submit</button>
</form>
erolkaya84
  • 1,769
  • 21
  • 28
0

I faced this problem and found a really simple and clean solution. Here's what you should do.

In your controller, make an empty object with any name("radioValue" in this case).

In your HTML file, use same 'ng-model' for each radio button/input with same name as that of object joining 'name' attribute of each radio button(that too should be same for each button) separated by a period(.) as shown in code snippet.

The Controller

var radioValue={};
...
...
console.log($scope.radiovalue) //use JSON.strinigify if naccessary

The HTML File

    <input type="radio" name="somename" ng-model="radioValue.somename" value="1"/>
    <input type="radio" name="somename" ng-model="radioValue.somename" value="2"/>
    <input type="radio" name="somename" ng-model="radioValue.somename" value="3"/>
//Don't forget to mention value attribute. ng-model does the work by identifying the radio-buttons/inputs by value attribute

The Output you should expect

{"somename":"1"} //if radio-button with value "1" is selected.
Dheeraj Moudgil
  • 51
  • 1
  • 6