AngularJS radio button group with select list value

Question

I have an AngularJS app which asks the user to input a number from some options using a radio button group to indicate their choice.

There are 3 fixed options (with values 1, 2 and 3 for example), and a fourth option which contains a select list with the additional option values 4, 5, 6. The fixed values are common enough to separate them but we want to be able to give alternate options.

Everything is fine without the select list as the 4th option, but I am having trouble with handling the 2 separate values for the radio button value and the value of the select list.

Ideally, the markup for this situation is something like

<!-- Controller aliased as ctrl-->    

<!-- Fixed Option 1-->
<label>
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="1"/>
    1
</label>
<!-- Fixed Option 2-->
<label>
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="2"/>
    2
</label>
<!-- Fixed Option 3-->
<label>
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="3"/>
    3
</label>

<!-- Custom Option-->
<label>
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="?"/>
    <select ng-model="ctrl.SelectedNumber" ng-options="option for option in [4, 5, 6]"></select>
</label>

With a controller that looks like

...
var ctrl = this;
ctrl.SelectedNumber = 1;
...

My question is this: how can I keep track of the state of the radio button group and the state of the select list to bind to a single selected option?

A jsFiddle can be found here. Thank you!

The jsFiddle seems to work. Do you just want the radio button to just appear to be selected? — jperezov
– jperezov, Commented Dec 7, 2015 at 19:39
@jperezov, Yes I do want the radio button to appear selected. It is the interplay between the ng-value of the 4th radio button, the ng-model on all of the radio buttons, and the ng-model on the select list I am having trouble with. Am I just way over-complicating this? Thanks for looking at it. — rictionaryFever
– rictionaryFever, Commented Dec 7, 2015 at 19:54

jperezov · Accepted Answer · 2015-12-07 20:12:00Z

1

In order to have the select field update the radio button, you actually need to have its model be a different variable, and use $scope.$watch to sync them. Fiddle here.

This is what your updated controller should look like:

var ctrl = this;
ctrl.SelectedNumber = 1;
ctrl.selectVal = 4;
$scope.$watch('ctrl.selectVal', function(val) {
  ctrl.SelectedNumber = val;
});

And your updated HTML (just the last radio button / select):

 <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="ctrl.selectVal" />
 <select ng-model="ctrl.selectVal" ng-options="option for option in [4, 5, 6]"></select>

The ng-value of the radio button becomes the ng-model of the select.

answered Dec 7, 2015 at 20:12

jperezov

3,1912 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rictionaryFever Over a year ago

Thank you. That is exactly what I was looking for.

Shaishab Roy · Accepted Answer · 2015-12-07 20:51:54Z

1

Also you can call a function for select list change to select last radio button. Like..

HTML

<label>
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" value="{{ctrl.selectval}}" />
    <select ng-model="ctrl.selectval" ng-change="ctrl.selectFromList(ctrl.selectval)" ng-options="option for option in [4, 5, 6]"></select>
  </label>

and controller:

app.controller("MainCtrl", function() {
    var ctrl = this;
    ctrl.SelectedNumber = 1;
    ctrl.selectval=4;
    ctrl.selectFromList = function(getVal) {
      ctrl.SelectedNumber = getVal;
    };
  });

answered Dec 7, 2015 at 20:51

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Collectives™ on Stack Overflow

AngularJS radio button group with select list value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related