【问题标题】:need inner action list supported angular js dropdown需要内部动作列表支持的角度 js 下拉列表
【发布时间】:2015-04-16 22:05:03
【问题描述】:

任何人都可以为我提供 angularjs 下拉列表的参考,其中包含如图所示的操作链接?如果我们将鼠标悬停在任何标签上,则应从动作列表中显示单独的动作列表。请参阅随附的屏幕截图以供参考。如图所示,我应该也可以拥有第 2 部分。官方的 Angularjs UI Bootstrap 下拉菜单(ui.bootstrap.dropdown)只提供了一个操作列表(图片中的第 1 部分)

到目前为止,我使用了以下正常的代码:

<div class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn dropdown-toggle" dropdown-toggle>
        Save Options <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href ng-click="saveFilter(ui3DataSet)">Save Filter</a></li>
        <li><a href ng-click="saveAsFilter(ui3DataSet)">Save Filter As</a></li>
    </ul>
</div>

但是现在当我将鼠标悬停在 saveFilter(ui3DataSet) 上时,右侧应该会显示另一个列表。我正在寻找任何可以轻松提供此功能的 Angularjs 插件。

根据@Dmitri Zaitsev,以下解决了这个问题:

<li class="dropdown-submenu">
    <a href ng-click="saveAsFilter(ui3DataSet)">Others</a>
    <ul class="dropdown-menu">
        <li> One </li>
        <li> two </li>
    </ul>
</li>

【问题讨论】:

  • 你能告诉我你的代码吗?
  • 希望您能理解我的问题。我已经更新了它以获得更好的清晰度。不知道你能不能看到图片?图片不言自明。

标签: angularjs angularjs-directive angular-ui angular-ui-bootstrap


【解决方案1】:

这是一个纯 Bootstrap 实现:

http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3#comments

如果您愿意,可以将其包装到 Angular directive 中(例如,参见 UI UtilsjQuery Passthrough 的实现)。


还有其他可能有帮助/相关的线程:

Dynamically creating nested navigation menu item using Bootstrap and Angularjs

AngularJS multilevel dropdown menu for a menu structure generated from a recursive directive

Angular UI multi-level Dropdown Toggle

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-02-24
    • 2015-02-23
    • 1970-01-01
    相关资源
    最近更新 更多