angular ui 中的下拉菜单 - 网格列未下拉

Question

我正在尝试将下拉菜单插入到 ui-grid 中的列中。每个菜单项都会附加一个 ng-click。

我正在使用 ui-grid-unstable.min.js 因为分页在 ui-grid-stable.min.js

中似乎不起作用

该按钮出现在网格中并注册它已被单击（打开的 class 被添加到它）但它没有下拉。

我的 ui-grid columndef 看起来像这样：

this.gridOptions.columnDefs = [
{ field: 'Foo', displayName: 'Actions', cellTemplate: '/app/quiz/action.html', sortable: false }
];

cellTemplate 代码来自 "Dropdown on Body" 按钮示例 https://angular-ui.github.io/bootstrap/ 它看起来像这样：

<div class="btn-group" dropdown dropdown-append-to-body>
  <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
    Dropdown on Body <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ui.bootstrap 包含在我的应用模块中，.css 和 .js 文件包含在我的 index.html

中

我看了这个：和其他一些，但他们似乎处理创建绑定选择（不是下拉菜单）并在堆栈溢出上搜索其他类似项目，但我找不到解决的问题我的问题是按钮菜单连下拉都没有。

Answer 1

进一步研究表明，这是因为 ui- 网格单元格上的 class 被溢出隐藏了。通过为单元格添加 class 和 overflow:visible 的 columnDef，我能够解决问题。

Answer 2

在 uib-dropdown 或 dropdown 指令附近添加 dropdown-append-to-body 有助于解决 overflow:hidden 问题。也在 ui-grid 单元格内。

<div class="btn-group" uib-dropdown dropdown-append-to-body>
...
</div>

angular ui 中的下拉菜单 - 网格列未下拉

Dropdown menu in angular ui-grid column not dropping down

angularjs

angular-ui-grid