Angularjs Contenteditable in ng-repeat with row/column actio

Question

我有HTML表格，其中的行和列由角度js动态创建。添加行/列后，我希望有一个选项，当用户将鼠标悬停在该行或列上时，它会显示一个删除按钮图标，单击该图标将删除该行/列。对于删除列，我让它工作了。因此，如果您看到我下面的演示并将鼠标悬停在列顶部的正上方，您将看到一个删除图标。

我在删除行时遇到问题。我希望删除图标出现在第一行的左侧，但它没有出现。问题是因为我对该行使用了内容可编辑。如果我删除它，它可以工作，我可以看到图标。

contenteditable="true"

以下是相关代码：

<td class="unique-id" contenteditable="true" ng-model="r.id">{{r.id}}
<div class="btn-group btn-group-xs">
<button ng-show="row == $index" type="button" class="btn" ng-click="deleteRow($index)">
<span class="glyphicon glyphicon-remove"></span></button>
</div>
</td>

上面如果我删除内容可编辑或使内容可编辑=">

false"，我可以看到删除图标，但看不到内容可编辑="true"。我希望此行可编辑，因此希望此属性为真。

解决此问题的任何解决方法或任何其他解决方案。

下面是代码笔演示： https://codepen.io/anon/pen/bmBXqg

Answer 1

这是一个您可以使用的解决方法。我基本上只是将 id 移动到div 而不是 td 上，这样两个div 就可以在 td 中共存，而其中一个contenteditable设置为 true

<td class="unique-id">
<div contenteditable="true" ng-model="r.id">{{r.id}}</div>
<div class="btn-group btn-group-xs">
<button ng-show="row == $index" type="button" class="btn" ng-click="deleteRow($index)"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</td>