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

Question

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.

Possible duplicate of disabling an entire div in angularjs

Stanislav Kvitash
– Stanislav Kvitash

2017-09-01 12:21:02 +00:00
Commented Sep 1, 2017 at 12:21 — Stanislav Kvitash
– Stanislav Kvitash, Commented Sep 1, 2017 at 12:21

kumar · Accepted Answer · 2017-09-01 12:15:41Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related