不同离子射频的射电组在同一分区角2离子2 [英] Radio-group on different ion-radio in same division angular 2 ionic 2

问题描述

我创建了一个离子网格无线电组，其中离子行和
在离子行中在每个离子行中有3个 ion-cols ，在最后2个离子列中我放置了离子无线电。

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.

像这样

<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>

现在因为只有一个无线电组，所以将从两列中选择一个项目。但我想在一个 div 中选择2个无线电组来从每一列中选择一个项目。

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.

我该怎么办？ 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>

这篇关于不同离子射频的射电组在同一分区角2离子2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！