如何将 uib-dropdown 菜单附加到 table 行？

Question

我有一个 uib-下拉菜单。当用户点击一行时，它应该显示在该行下方。

我当前的解决方案 (http://plnkr.co/edit/sVdR3CLgi5BFuWl5jxWM) 显示在 table 下方。

我该如何更改？

  <div ng-controller="DropdownCtrl">
    <!-- Simple dropdown -->
    <table class=".table">
      <tr ng-repeat="it in items" ng-click="toggleDropdown($event)">
        <td>
          {{it}}
        </td>
      </tr>
    </table>

    <div class="btn-group" uib-dropdown is-open="status.isopen">
      <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

Answer 1

您可以简单地向每个单元格添加一个下拉菜单，而不是在 table 之后使用一个下拉菜单。

这里 a plunkr 向您展示了一个示例。主要变化是将下拉列表的 html 代码移到 <td> 内，并为列表中的每个项目添加一个 open 标志，而不是在范围内有一个全局标志:

  $scope.items = [
    {
      label: 'The first choice!'
    },
    {
      label: 'And another choice for you.'
    },
    {
      label: 'but wait! A third!'
    }
  ];

  $scope.toggled = function(open) {
    $log.log('Dropdown is now: ', open);
  };

  $scope.toggleDropdown = function(it, $event) {
    $event.preventDefault();
    $event.stopPropagation();
    it.isopen = !it.isopen;
  };

如何将 uib-dropdown 菜单附加到 table 行？

How to attach uib-dropdown menu to a table row?

angularjs

angular-ui-bootstrap