Radio-group on different ion-radio in same division angular 2 ionic 2

Question

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

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>

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

What should I do.

Aneri Vala Aneri Vala · Accepted Answer · 2018-01-26T07:40:23

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>

Radio-group on different ion-radio in same division angular 2 ionic 2

1 Answers