如何根据条件禁用整个表格行 - AngularJS？答案

【问题标题】：How to disable the entire table row based on condition - AngularJS?如何根据条件禁用整个表格行 - AngularJS？
【发布时间】：2017-09-01 20:18:51
【问题描述】：

我想使用条件禁用整个表格行。我尝试使用ng-disable="item.cancel"。当我检查时，我可以看到 disabled=true。但字段已启用。

<table class="table table-hover" novalidate>
  <tr>
    <th>&nbsp;&nbsp;S.No.</th>
    <th style="text-align: center;">Item Description</th>
    <th>&nbsp;&nbsp;Cost</th>
    <th style="text-align: center;">Discount</th>
    <th>Total</th>
    <th></th>
  </tr>
  <tbody>
    <tr dir-paginate="item in modifiedtrackPaymentDetails |orderBy:sortkey:reverse|itemsPerPage:4">
      <td ng-disabled="item.cancel == true">&nbsp;&nbsp;{{$index + 1}}</td>
      <td ng-disabled="item.cancel == true">&nbsp;&nbsp;{{item.itemdesc}}</td>
      <td ng-disabled="item.cancel == true">&nbsp;&nbsp;{{item.basecost}}</td>
      <td ng-disabled="item.cancel == true" ng-if="item.amountpaid > 0">&nbsp;&nbsp;{{item.discount}}</td>
      <td ng-disabled="item.cancel == true" style="text-align: center; width: 120px;" ng-if="item.amountpaid == 0">
        <input class="form-control7" type="text" name="trackPaymentDiscount" id="trackPaymentDiscount_{{$index}}" required value={{item.discount}} ng-blur="calcTrackPayment()" ng-enter="calcTrackPayment()" decimal-places>
      </td>
      <td ng-disabled="item.cancel == true">&nbsp;&nbsp;{{item.total}}</td></td>
      <td><a class="installment-link">View Details</a></td>
    </tr>
  </tbody>
</table>

{{item.cancel}} == true; 时我需要禁用整个表格行。我尝试直接在<tr> 中使用ng-disabled。

【问题讨论】：

disabling an entire div in angularjs的可能重复

标签： javascript angularjs

【解决方案1】：

你不能禁用该行，因为它不是一个输入控件，你可以在自定义样式的帮助下做到这一点。编写一个特定的 css 类并使用 ng-class={'custom_class':item.取消 == true}

.custom_class{ “背景色”：“灰色” }

<tr dir-paginate="item in modifiedtrackPaymentDetails |orderBy:sortkey:reverse|itemsPerPage:4" ng-class={'custom_class':item.cancel == true}>
      <td ng-disabled="item.cancel == true">&nbsp;&nbsp;{{$index + 1}}</td>
      <td ng-disabled="item.cancel == true">&nbsp;&nbsp;{{item.itemdesc}}</td>
      <td ng-disabled="item.cancel == true">&nbsp;&nbsp;{{item.basecost}}</td>
      <td ng-disabled="item.cancel == true" ng-if="item.amountpaid > 0">&nbsp;&nbsp;{{item.discount}}</td>
      <td ng-disabled="item.cancel == true" style="text-align: center; width: 120px;" ng-if="item.amountpaid == 0">
        <input class="form-control7" type="text" name="trackPaymentDiscount" id="trackPaymentDiscount_{{$index}}" required value={{item.discount}} ng-blur="calcTrackPayment()" ng-enter="calcTrackPayment()" decimal-places>
      </td>
      <td ng-disabled="item.cancel == true">&nbsp;&nbsp;{{item.total}}</td></td>
      <td><a class="installment-link">View Details</a></td>
    </tr>

【讨论】：