Angularjs radio buttons

Question

I know that this has been spoken about in some Google Threads but I still can't find the right solution to bind my radio inputs to a model (in clean'n simple manner),

Currently I have HTML:

<input ng-model="searchByRma" type="radio" name="search-type">
<input ng-model="searchByDelivery" type="radio" name="search-type">

And in Controller:

$scope.searchByRma      = true;
$scope.searchByDelivery = false;

This does not work (as it would with the checkboxes)...

Any ideas on how to set the default value on the first radio button without loosing data-binding?

Thanks!

Tosh · Accepted Answer · 2012-09-26 08:06:09Z

65

I think you should use same variable with different values in those two radio buttons.

<input ng-model="searchBy" value="Rma" type="radio" name="search-type">
<input ng-model="searchBy" value="Delivery" type="radio" name="search-type">

Then, you should have searchBy set either "Rma" or "Delivery" depending on user input.

answered Sep 26, 2012 at 8:06

Tosh

36k11 gold badges67 silver badges58 bronze badges

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

2 Comments

alchemication Over a year ago

That's perfect, I also had ng-checked set on one of the radio buttons that was breaking it, so it might be helpful for someone... Thanks!!!

mramosch Over a year ago

Why for example is this also working perfectly but it doesn’t when the type=‘radio’ ??? <input type='checkbox' ng-init='checkStatus=false' ng-model='checkStatus' ng-click='doIfChecked(checkStatus)'>

enriquein · Accepted Answer · 2013-11-01 19:28:00Z

-1

What has worked for me is to set the model variable to { } and that will reset the radio buttons to their default (not selected) state. Of course, this will only work if you have your radio button tags correct as in tosh's answer.

In your case:

$scope.searchBy = { };

answered Nov 1, 2013 at 19:28

enriquein

1,0481 gold badge14 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angularjs radio buttons

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related