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”。我希望此行可编辑，因此希望此属性为true。

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

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

Answer 1

这是可以使用的替代方法。我基本上只是将ID移到了div而不是td上，因此当一个contenteditable设置为true时，两个div可以共存于td中。

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

AngularJS Contenteditable在ng-repeat中具有行/列操作

1 个答案: