代码之家 › 专栏 › 技术社区 › kaka1234

Angularjs Contenteditable in ng repeat with row/column动作

angularjs css html

kaka1234 · 技术社区 · 6 年前

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

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”,我可以看到delete图标,但不能看到contenteditable=“true”。我希望此行可编辑,因此希望此属性为真。

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

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

1 回复 | 直到 6 年前

Jazib 6 年前

这是一个你可以使用的工作环境。我基本上只是把id移到了一个div,而不是td,这样两个div可以在td中共存,而一个div已经存在了 contenteditable

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前