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

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