CODEWITHSUNDEEP
javascriptangularjs
sudarsan
sudarsan

Reputation: 75

How to disable the entire table row based on condition - AngularJS?

I want to disable the entire table row using a condition. I tried using ng-disable="item.cancel". When I inspect I am able to see disabled=true. But the fields are enabled.

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

I need to disable the entire table row when {{item.cancel}} == true;. I tried using ng-disabled in <tr> directly.

Upvotes: 0

Views: 5878

Answers (1)

kumar
kumar

Reputation: 109

you can't disable the row because it's not a input control, you can do that with help of custom style .. write a specific css class and apply using ng-class={'custom_class':item.cancel == true}

.custom_class{ 'background-color':'grey' }

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

Upvotes: 1

Related Questions