disable table row in angularjs

Question

I have table with input=text fields, and when some of fields has id 'four' I need to disable this whole row. For this I try to use this function:

  $scope.disableIfRowHasFour = function(row){
    var result = row.filter(function(field){
      return field.id === 'four';
    })

    return result.length !== 0;
  };

and in html:

<tr ng-disabled='disableIfRowHasFour(row)' ng-repeat='row in tableFields'>
  <td ng-repeat='field in row'>
    <input type="text" value='{{field.value}}'>
  </td>
</tr>

and in devtools I see that row is disabled, but inputs in this row - not.

<tr ng-disabled="disableIfRowHasFour(row)" ng-repeat="row in tableFields" class="ng-scope" disabled="disabled">

where I'm wrong? I expect that all items in a row will be disabled..Plnkr example

You should add the ng-disabled tag on the input instead of the tr — Juanín
– Juanín, Commented Dec 6, 2016 at 17:29
yes, but how can I disabled all fields in a row, if id=four has only 1 input? — YoroDiallo
– YoroDiallo, Commented Dec 6, 2016 at 17:30
add ng-disabled='disableIfRowHasFour(row)' on the input. It should work — Juanín
– Juanín, Commented Dec 6, 2016 at 17:31
Look my answer, you can use ng-init to prevent multiple calls. — rogeriolino
– rogeriolino, Commented Dec 6, 2016 at 17:33

rogeriolino · Accepted Answer · 2016-12-06 17:32:49Z

1

In the tr tag use ng-init to initialize a variable with disabled value:

<tr ng-init='rowDisabled=disableIfRowHasFour(row)' ng-repeat='row in tableFields'>

And in the inputs you add ng-disabled:

<input type="text" value='{{field.value}}' ng-disabled="rowDisabled">

answered Dec 6, 2016 at 17:32

rogeriolino

1,13512 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Juanín Over a year ago

I think this wouldn't work because rowDisabled would be a variable shared among all the rows and therefore it would be true if the last one has four and false if the last one has something different than four. But, I'm not sure about the scope of the variable.

harishr Over a year ago

each element in ng-repeat has its own scope, hence it will work

YoroDiallo Over a year ago

yes, it works too, thx! is this faster then "ng-disabled='disableIfRowHasFour(row)' on the input"? or it does no matter?

rogeriolino Over a year ago

Storing the value in a variable prevent you to invoke the disableIfRowHasFour function on each input, saving processing.

Collectives™ on Stack Overflow

disable table row in angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related