Bootstrap表行单击打开其他选项按钮

我们使用angularjs创建了一个表,并希望为每一行添加一个选项,以进行编辑或删除。我们真的想要类似这样的东西 codepen ,但没有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个垂直点图标旁边,就像上面的codepen链接一样,但似乎无法让它看起来像那样。此外,现在当您单击一行的3个垂直点,然后单击另一行时,会打开2个框。在客户端控制器中,只需单击一下即可关闭上一个弹出框,我们需要做什么?