CODEWITHSUNDEEP
javascriptdata-bindingangularjs
alchemication
alchemication

Reputation: 5334

Angularjs radio buttons

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!

Upvotes: 32

Views: 29164

Answers (2)

enriquein
enriquein

Reputation: 1038

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 = { };

Upvotes: -1

Tosh
Tosh

Reputation: 36030

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.

Upvotes: 65

Related Questions