Question

我有一个表格，其中一列是我需要激活的复选框，具体取决于某个逻辑。

我的问题是，即使取消激活复选框，当我点击复选框时，在表格行，复选框也会被选中。

解决此问题的最佳方法是什么？也禁用行表？

 <table st-safe-src="sampleOverview.dataSet" st-table="sampleOverview.displayed" class="table table-striped">
    <tr ng-repeat="sample in sampleOverview.displayed track by $index" ng-click="sample.selected = !sample.selected" ng-class="{success: sample.selected, warning : sample.deviceId == null || sample.methodId == null }" ng-disabled="sample.deviceId == null || sample.methodId == null">
                <td class="hidden-xs hidden-sm">{{sample.lab}}</td>
                <td class="hidden-xs hidden-sm">{{sample.subLab}}</td>
                <td>{{sample.deviceLimsCode}}</td>
                <td>{{sample.methodLimsCode}}</td>
                <td>{{sample.sampleCode}}</td>
                <td class="text-center hidden-xs hidden-sm">
                    <input type="checkbox" ng-model="sample.selected" ng-click="sampleOverview.selectSample($event, sample)" ng-disabled="sample.deviceId == null || sample.methodId == null">
                </td>
            </tr>
        </tbody>
    </table>

Answer 1

您在行上使用ng-click。去掉它。您的ng-click表行正在触发要更改的复选框模型的值。您可以更改复选框ng-model的名称，也可以删除ng-click on table或更改后者中使用的变量。

 <table st-safe-src="sampleOverview.dataSet" st-table="sampleOverview.displayed" class="table table-striped">
    <tr ng-repeat="sample in sampleOverview.displayed track by $index" ng-class="{success: sample.selected, warning : sample.deviceId == null || sample.methodId == null }" ng-disabled="sample.deviceId == null || sample.methodId == null">
                <td class="hidden-xs hidden-sm">{{sample.lab}}</td>
                <td class="hidden-xs hidden-sm">{{sample.subLab}}</td>
                <td>{{sample.deviceLimsCode}}</td>
                <td>{{sample.methodLimsCode}}</td>
                <td>{{sample.sampleCode}}</td>
                <td class="text-center hidden-xs hidden-sm">
                    <input type="checkbox" ng-model="sample.selected" ng-click="sampleOverview.selectSample($event, sample)" ng-disabled="sample.deviceId == null || sample.methodId == null">
                </td>
            </tr>
        </tbody>
    </table>

或者如果您想根据ng-click为您的行添加一个类，请更改变量名称，如下所示

<table st-safe-src="sampleOverview.dataSet" st-table="sampleOverview.displayed" class="table table-striped">
    <tr ng-repeat="sample in sampleOverview.displayed track by $index" ng-click="selectedVal = !selectedVal" ng-class="{success: selectedVal, warning : sample.deviceId == null || sample.methodId == null }" ng-disabled="sample.deviceId == null || sample.methodId == null">
                <td class="hidden-xs hidden-sm">{{sample.lab}}</td>
                <td class="hidden-xs hidden-sm">{{sample.subLab}}</td>
                <td>{{sample.deviceLimsCode}}</td>
                <td>{{sample.methodLimsCode}}</td>
                <td>{{sample.sampleCode}}</td>
                <td class="text-center hidden-xs hidden-sm">
                    <input type="checkbox" ng-model="sample.selected" ng-click="sampleOverview.selectSample($event, sample)" ng-disabled="sample.deviceId == null || sample.methodId == null">
                </td>
            </tr>
        </tbody>
    </table>

并在控制器中初始化selectedVal

单击表格行时如何避免选中复选框

1 个答案: