Issue with multiple Ionic Radio ion-radio inputs in one view

When I use two ion-radio inputs in the same view, only the last radio group shows the selected option (with the check mark), the radio groups above the last don’t show their current selected value (even though it’s non-null). Why is that? Is this a known issue? If so, is there a workaround? Thanks for your help.

Can you put up a code sample? It would really help to know what name is associated with the radios’ in each group, what the model looks like, etc.

@sunnyday You need to set the name property. For example:

<ion-list>
  <ion-radio ng-repeat="unit in units" ng-value="unit.value" ng-model="unitChoice" ng-click="selectUnit(unit)" name="unit">{{unit.text}}</ion-radio>
</ion-list>

It’s the name property that determines the group and Ionic handles this.

12 Likes

After hours of scratching my head, this perfectly solved my evening. Thank you!

the ion-radio documentation should probably mention this :sweat_smile:

@jprichardson You saved my day. Thanks