如何避免在點擊表格行時選中複選框

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模型的名稱，也可以刪除表格中的ng鍵或更改後者中使用的變量。

<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