Question

我有一张包含不同行数的表。

<table>
<thead>
    <tr>
        <th class="text-center">Name</th>
        <th class="text-center">Select Supervisor</th>
    </tr>
</thead>
    <tbody>
        <tr ng-repeat="employeeInfo in employees" class="ng-cloak text-center">
            <td>{{employeeInfo.name}} {{employeeInfo.lastname}}</td>
            <td>
                <label><input type="radio" ng-model="employeeInfo.attributes[0].value" ng-value="true" ng-change="updateEmployeeAttribute(employeeInfo)">Approve</label>
                <label><input type="radio" ng-model="employeeInfo.attributes[0].value" ng-value="false" ng-change="updateEmployeeAttribute(employeeInfo)">Reject</label>
            </td>
        </tr>
    </tbody>
</table>
<div>
    <a id="Approve" class="btn btn-primary" ng-click="approveSupervisorChanges()">Submit</a>
</div>

其中一列包含单选按钮“Approve”＆amp; “拒绝”

如何要求用户在提交之前必须在所有行中选择一个单选按钮？

我通过添加

尝试了此解决方案Validate Radio Button AngularJS

ng-required="!employeeInfo.attributes[0].value"

但似乎接受是一项要求，如果被拒绝，我就无法提交

Answer 1

您可以将所需属性简单地添加为：

<label><input type="radio" required ng-model="employeeInfo.attributes[0].value" ng-value="true" ng-change="updateEmployeeAttribute(employeeInfo)">Approve</label>
            <label><input type="radio" required ng-model="employeeInfo.attributes[0].value" ng-value="false" ng-change="updateEmployeeAttribute(employeeInfo)">Reject</label>

Answer 2

好的，所以我通过使用像这样的ng-required使用它。

<label><input type="radio" ng-required="employeeInfo.attributes[0].value" ng-model="employeeInfo.attributes[0].value" ng-value="true" ng-change="updateEmployeeAttribute(employeeInfo)">Approve</label>
<label><input type="radio" ng-required="!employeeInfo.attributes[0].value" ng-model="employeeInfo.attributes[0].value" ng-value="false" ng-change="updateEmployeeAttribute(employeeInfo)">Reject</label>

哪个不是很完美（但它有效），因为当选择注释时，弹出窗口仅突出显示拒绝单选按钮并说“请选择其中一个选项”

如何制作动态创建的单选按钮 - AngularJs

2 个答案: