Question

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

我当前的解决方案（http://plnkr.co/edit/sVdR3CLgi5BFuWl5jxWM）显示在表格下方。

我该如何改变？

  <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

您只需在每个单元格中添加一个下拉列表，而不是在表格后面使用单个下拉列表。

这里a plunkr向您展示了一个例子。主要的变化是在<td>内移动下拉列表的html代码，并在列表中的每个项目中添加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菜单附加到表格行？

1 个答案: