如何在启用/禁用按钮的帮助下禁用/启用表中的整个行？

Question

在我的表格中，我有两个按钮Enable和Disable 。 在表格中，我想借助这些按钮禁用/启用整行。 首先，当禁用“启用”按钮时，“禁用”按钮必须处于活动状态。 当我单击“禁用”按钮时，整个行应被禁用，而“禁用”按钮被禁用时，“启用”按钮必须被激活。 如何在angularJS中做到这一点。 需要帮助。

<table style="border:1px solid;">
<tr>
  <td>one</td>
  <td>two</td>
  <td>three</td>
  <td>
    <button>ENABLE</button><br/>
    <button>DISABLE</button>
  </td>
</tr>
</table>

https://jsfiddle.net/vtkj1cug/

Answer 1

我希望您知道ng-repeat工作原理，这是如何完成的：

// HTML
<tr ng-repeat="item of items"
    ng-click="rowClicked(item)"
    class="{{item.enabled ? 'row-enabled': ''}}">
  <td>Content 1</td>
  <td>Content 2</td>
  <td>Content 3</td>
  <td>Content 4</td>
  <td>Content 5</td>
  <td>
    <button ng-if="!item.enabled"
            ng-click="item.enabled = true">
      ENABLE
    </button>
    <button ng-if="item.enabled"
            ng-click="item.enabled = false">
      DISABLE
    </button>
  </td>
</tr>

//JS
$scope.rowClicked = function(item)
{
  if (!item.enabled)
  {
    // HEY ROW IS DISABLED YOU CAN'T PASS
    return;
  }

  // stuff
}

更新：

由于您的问题范围已更改，因此这里是您需要的更新

// HTML
<tr ng-click="rowClicked()"
    class="{{!rowEnabled ? 'disabled': ''}}">
  <td>Content 1</td>
  <td>Content 2</td>
  <td>Content 3</td>
  <td>Content 4</td>
  <td>Content 5</td>
  <td>
    <button ng-disabled="!rowEnabled"
            ng-click="rowEnabled = true">
      ENABLE
    </button>
    <button ng-disabled="rowEnabled"
            ng-click="rowEnabled = false">
      DISABLE
    </button>
  </td>
</tr>

//JS
$scope.rowEnabled = false; // put it somewhere in your declaration area.

$scope.rowClicked = function()
{
  if (!$scope.rowEnabled)
  {
    // HEY ROW IS DISABLED YOU CAN'T PASS
    return;
  }

  // stuff
}

注意：表元素没有disabled属性，仅应用于输入元素。 因此，如果您想让自己看起来很残疾，则需要使用CSS自己创建它，例如：

tr.disabled {
   // some styles to make your element disabled
   cursor: default;
}

可以工作的angularjs示例希望对您有所帮助

Answer 2

您只能启用和禁用表单元素，如果您想禁用最希望在CSS样式中使用的表格行，

在表单元素上，您可以使用

<md-button class="md-primary md-raised" ng-disable="[Enabled true false var]"> {{enable}} </md-button>
<md-button class="md-warn md-raised" ng-disable="![Enabled true false var]"> {{disable}} </md-button>

NG-禁用

在表格行上，您可以添加ng-class来设置表单元素的样式

<tr ng-class="{'enabled-row': [Enabled true false var], 'disabled-row': ![Enabled true false var]}">