不同离子射频的射电组在同一分区角2离子2

Question

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

像这样

<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个无线电组来从每列中选择一个项目。

我该怎么做。

Answer 1

如果你想从每一列中选择一个时间可能是你需要为每一行设置无线电组，如果你想使用两个无线电组输出将是不同的。我猜你可以试试这个。它可以是您想要的输出。

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