javascript - 禁用 angularjs 中的表格行

Question

我有一个带有 input=text 字段的表，当某些字段的 ID 为“4”时，我需要禁用整行。为此，我尝试使用此功能:

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

    return result.length !== 0;
  };

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

在开发工具中，我看到该行被禁用，但该行中的输入 - 没有。

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

我哪里错了？我希望连续的所有项目都将被禁用。 Plnkr example

Answer 1

在 tr 标签中使用 ng-init 来初始化具有禁用值的变量:

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

并在输入中添加ng-disabled:

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