Question

我想使用条件禁用整个表行。我尝试使用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;时禁用整个表格行。我尝试直接在ng-disabled中使用<tr>。

Answer 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>

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

1 个答案: