html - Angularjs Contenteditable 在 ng-repeat 中与行/列 Action

Question

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

我在删除行时遇到问题。我希望删除图标出现在第一行的左侧，但它没有出现。问题是因为我正在为该行使用 contenteditable。如果我删除它，它会起作用并且我可以看到该图标。

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>

如果我删除 contenteditable 或设置 contenteditable="false"，我可以看到删除图标，但看不到 contenteditable="true"。我想让这一行可编辑，所以希望此属性为真。

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

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

Answer 1

这是您可以使用的解决方法。我基本上只是将 id 移动到 div 而不是 td，这样两个 div 可以在 td 中共存，而一个 div 将 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>