在我的表格中,我有两个按钮启用 和禁用。在表格中,我想借助这些按钮禁用/启用整行。首先,禁用按钮必须处于事件状态,而启用按钮被禁用。当我单击“禁用”按钮时,整行都应该被禁用,并且“启用”按钮必须处于事件状态,而“禁用”按钮被禁用。如何在 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>
最佳答案
我希望你知道 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
}
注意:table 元素没有 disabled
属性,它只应用于输入元素。所以如果你想要一个禁用的外观,你需要使用 CSS 自己创建它,比如:
tr.disabled {
// some styles to make your element disabled
cursor: default;
}
关于javascript - 如何借助启用/禁用按钮禁用/启用表格中的整行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45932652/