Question:

I have created an <strong>ion-grid radio-group</strong> in which there are <strong>ion-rows</strong> and in <strong>ion-rows</strong> there are 3 <strong>ion-cols</strong> in each <strong>ion-row</strong> and in last 2 ion-col I've put <strong>ion-radios</strong>.

like this

<ion-grid class = "DiscountOptions" radio-group> <ion-row style = "border: 1px solid; padding: 8px; background-color: #84AEF9"> <ion-col>Discount Options</ion-col> </ion-row> <ion-row> <ion-col>Pay 100% of fee now & get 25% discount</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> </ion-row> <ion-row> <ion-col>Pay 50% of fee now & get 15% discount</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> </ion-row> <ion-row> <ion-col>Pay 10% of fee now & get 10% discount</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;10.0%</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;10.0%</ion-col> </ion-row> <ion-row> <ion-col>Pay Later</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;0.0%</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;0.0%</ion-col> </ion-row> </ion-grid>

<a href="https://i.stack.imgur.com/zouJp.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/zouJp.png" data-original="https://i.stack.imgur.com/zouJp.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Now as there is only one <strong>radio-group</strong>, one item will be selected from both columns. But I want 2 <strong>radio-group</strong> in one <strong>div</strong> to select one item from each column.

What should I do.

If you want to select one item from each column that time might be you have to set radio-group for each row and if you want to use two radio-group output will be something different.I guess you can try this.It can be your desired output.

<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <!--With the four radio-group if you want to select one item from the each column --> <div style="border: 1px solid; padding: 8px;"> <ion-grid> <ion-row style="border: 1px solid; padding: 8px; background-color: #84AEF9"> <ion-col>Discount Options</ion-col> </ion-row> </ion-grid> <ion-grid class="DiscountOptions"> <ion-row radio-group [(ngModel)]="choosedData1" (change)="selctedValue1($event)"> <ion-col>Pay 100% of fee now & get 25% discount</ion-col> <ion-col class="euro"> <ion-radio value="25.0%" checked="true"></ion-radio>&nbsp;&euro;25.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> </ion-row> <ion-row radio-group [(ngModel)]="choosedData2" (change)="selctedValue2($event)"> <ion-col>Pay 50% of fee now & get 15% discount</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> </ion-row> </ion-grid> <ion-grid class="DiscountOptions"> <ion-row radio-group [(ngModel)]="choosedData3" (change)="selctedValue3($event)"> <ion-col>Pay 100% of fee now & get 25% discount</ion-col> <ion-col class="euro"> <ion-radio checked="true"></ion-radio>&nbsp;&euro;25.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> </ion-row> <ion-row radio-group [(ngModel)]="choosedData4" (change)="selctedValue4($event)"> <ion-col>Pay 50% of fee now & get 15% discount</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> </ion-row> </ion-grid> </div> <!--With the two radio-group if you want to select one item from the each radio-group --> <div style="border: 1px solid; padding: 8px;"> <ion-grid> <ion-row style="border: 1px solid; padding: 8px; background-color: #84AEF9"> <ion-col>Discount Options</ion-col> </ion-row> </ion-grid> <ion-grid class="DiscountOptions" radio-group [(ngModel)]="choosedData5" (change)="selctedValue5($event)"> <ion-row> <ion-col>Pay 100% of fee now & get 25% discount</ion-col> <ion-col class="euro"> <ion-radio value="25.0%" checked="true"></ion-radio>&nbsp;&euro;25.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> </ion-row> <ion-row> <ion-col>Pay 50% of fee now & get 15% discount</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> </ion-row> </ion-grid> <ion-grid class="DiscountOptions" radio-group [(ngModel)]="choosedData6" (change)="selctedValue6($event)"> <ion-row> <ion-col>Pay 100% of fee now & get 25% discount</ion-col> <ion-col class="euro"> <ion-radio checked="true"></ion-radio>&nbsp;&euro;25.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> </ion-row> <ion-row> <ion-col>Pay 50% of fee now & get 15% discount</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> </ion-row> </ion-grid> </div> </ion-content>