每 table 行多个单选按钮

Question

<table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th scope="col">Agenda No</th>
                        <th scope="col">Agenda Description</th>
                        <th scope="col">Opinion</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of agendaList">
                        <td>Agenda&nbsp;{{item.AGENDANO}}</td>
                        <td>{{item.AGENDA_DESC}}</td>
                        <td>
                            <div class="custom-control custom-radio">
                                <input type="radio" value="1" id="customRadio1" name="customRadio" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio1">Yes</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input type="radio" value="0" id="customRadio2" name="customRadio" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio2">No</label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

我有 table 个值，共 3 个值。每行将有 2 个单选按钮，"yes" 或 "no"。我怎样才能 select 每行中的一个。

表示：

第 1 行 --> "yes", "no" ---> 我会 select 是的

第 2 行 --> "yes", "no" ---> 我会 select 不

第 3 行 --> "yes", "no" ---> 我会 select 是的

我该怎么做？

Answer 1

https://stackblitz.com/edit/angular-nwdean

你需要改变他们的名字属性。每行使它们唯一，例如你可以写成 name="customRadio{{item.AGENDANO}}" 并再创建一个属性以将您的答案绑定到您的模型。我为 u

创建了示例 stackblitz 演示

<table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th scope="col">Agenda No</th>
                        <th scope="col">Agenda Description</th>
                        <th scope="col">Opinion</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of agendaList">
                        <td>Agenda&nbsp;{{item.AGENDANO}}</td>
                        <td>{{item.AGENDA_DESC}}</td>
                        <td>
                            <div class="custom-control custom-radio">
                                <input type="radio" value="1" id="customRadio{{item.AGENDANO}}" name="customRadio{{item.AGENDANO}}" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio{{item.AGENDANO}}">Yes</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input type="radio" value="0" id="customRadio2" name="customRadio{{item.AGENDANO}}" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio{{item.AGENDANO}}">No</label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

Answer 2

喜欢这个。

<table class="table table-hover table-bordered">
  <thead>
      <tr>
          <th scope="col">Agenda No</th>
          <th scope="col">Agenda Description</th>
          <th scope="col">Opinion</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let item of agendaList">
          <td>Agenda&nbsp;{{item.AGENDANO}}</td>
          <td>{{item.AGENDA_DESC}}</td>
          <td>
              <div class="custom-control custom-radio">
                  <input type="radio" value="1" id="{{item.AGENDANO}}" name="{{item.AGENDANO}}" class="custom-control-input">
                  <label class="custom-control-label" for="{{item.AGENDANO}}">Yes</label>
              </div>
              <div class="custom-control custom-radio">
                  <input type="radio" value="0" id="{{item.AGENDANO}}" name="{{item.AGENDANO}}" class="custom-control-input">
                  <label class="custom-control-label" for="{{item.AGENDANO}}">No</label>
              </div>
          </td>
      </tr>
  </tbody>
</table>

查看 working demo

如有任何疑问，请告诉我。

已更新 附截图

每 table 行多个单选按钮

Multiple radio button per table row

angular

angular6