时间戳

首页 > 解决方案 > 每个表格行有多个单选按钮

angular - 每个表格行有多个单选按钮

问题描述

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

我有 3 个值的表。每行将有 2 个单选按钮，“是”或“否”。如何分别从每一行中选择其中一个。

方法：

第一行 --> “是”、“否” ---> 我会选择是

第二行 --> "yes", "no" ---> 我会选择 no

第三行 --> “是”、“否” ---> 我会选择是

在此处输入图像描述

我怎样才能做到这一点？

标签： angularangular6

解决方案

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

你需要改变他们的名字属性。让每一行的它们都独一无二，例如你可以像这样写name="customRadio{{item.AGENDANO}}" 并创建一个更多的属性来将你的答案绑定到你的模型。我为你创建了示例 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>

推荐阅读