Angular two way binding radio inputs

Question

I have two sets of radio inputs:

<input type="radio" value="0" ng-model="domestic" ng-checked="domestic"> Domestic
<input type="radio" value="1" ng-model="international" ng-checked="international"> International

and:

<input type="radio" value="0" ng-model="domestic" ng-checked="domestic"> Verified
<input type="radio" value="1" ng-model="international" ng-checked="international"> Unverified

Regardless of which input in either set I click I want it to change the same one in the other set accordingly.

I have written it like this because I want it to work both ways.

Is this the right way to bind? or is there a better way.

Thanks

Aweary · Accepted Answer · 2015-03-04 03:01:07Z

1

Think about it from an abstracted standpoint. What you're doing now is binding two radio inputs to the same value. If you want both radio inputs to represent the same data value in all cases, what you're doing is fine.

Otherwise you can always set ng-checked to a function. This would be ideal if you had other considerations you wanted to make. Something like:

<input type="radio" value="0" ng-model="domestic" ng-checked="domesticChecked()"> Domestic

Using:

$scope.domesticChecked = function(){
    // you could do other checks here as well if it needed to be more complicated
   return (domestic && someOtherConsideration) ? true : false
 }

In short, if all scenarios in your app present a 1:1 value association between those two checkboxes (if one is checked, the other is always checked too and vice versa) then what you have is fine.

answered Mar 4, 2015 at 3:01

Aweary

2,31219 silver badges26 bronze badges

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

1 Comment

Aiden Over a year ago

great thanks for that. in some aspects there is a lot of information on angular best practice and in other aspects hardly anything. thanks for the fast reply. I'll take into account the function method as I might need to consider things as my elements are very connected.

Arun P Johny · Accepted Answer · 2015-03-04 03:03:43Z

0

I think what you are looking for is

<input type="radio" value="0" ng-model="domestic" name="x"> Domestic
<input type="radio" value="1" ng-model="domestic" name="x"> International


<input type="radio" value="0" ng-model="domestic" name="y"> Verified
<input type="radio" value="1" ng-model="domestic" name="y"> Unverified

Demo: Fiddle

You need to assign names to the radio elements so that they can be grouped, then if you use the same ng-model you should be fine.

answered Mar 4, 2015 at 3:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

Angular two way binding radio inputs

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