引导表行单击以打开其他选项按钮

Question

我们有一个使用 angularjs 创建的表，并希望为每一行添加一个选项来编辑或删除。 我们真的想要一些类似于这个代码笔的东西，但没有jquery。

到目前为止，我们有以下内容：

<tr ng-repeat="item in data.list | filter:searchTable track by item.sys_id" >
<td class="moreOption">
<div class="more" ng-click="c.showHide(item);">
<div class='moredrop' ng-hide="!item.IsHidden">
<ul>
<li>
<i class='material-icons'>edit</i>
<span class='label'>Edit</span>
</li>
<li>
<i class='material-icons'>delete</i>
<span class='label'>Delete</span>
</li>
</ul>
</div>
</div> 
</td>
</tr>

在我们的客户端控制器中，我们有：

c.showHide = function(item) {
item.IsHidden = !item.IsHidden;
}

我们真正苦苦挣扎的是显示"编辑"或"删除"的弹出框的CSS样式。 我们希望它在单击时"浮动"在 3 个垂直点图标旁边，就像上面的代码笔链接一样，但似乎无法让它看起来像那样。 此外，现在当您单击一行的 3 个垂直点，然后单击另一行时，它会打开 2 个框。 我们必须在客户端控制器中做什么才能一键关闭上一个弹出框？

Answer 1

为什么不使用简单的 Bootstrap 下拉列表？

下拉菜单：引导

使用您自己的按钮或图标启动包含此代码的下拉列表。

$('.dropdown-toggle').dropdown()