Angular UI 多级下拉切换答案

【问题标题】：Angular UI multi-level Dropdown ToggleAngular UI 多级下拉切换
【发布时间】：2016-07-27 22:53:35
【问题描述】：

我正在尝试使用 Angular UI Dropdown Toggle 创建多级/嵌套下拉菜单。

当我点击下拉菜单的第一层时，它会完全关闭，不会显示第二层。

我附上了一个非常基本的 plunkr 来演示我正在尝试实现的基本版本。

http://plnkr.co/edit/c0GbKQoYWICXwd3JRWGV?p=info

任何帮助，不胜感激。

谢谢

【问题讨论】：

标签： angularjs drop-down-menu toggle angular-ui angular-bootstrap

【解决方案1】：

子菜单已从 Boostrap 3 中删除，因为它被认为与移动设备无关。

“子菜单现在在网络上没有太多的位置，尤其是移动网络。它们将在 3.0 中被删除”-https://github.com/twbs/bootstrap/pull/6342

使用 Bootstrap 3.0.0（最终版）的示例：http://bootply.com/86684

来自 StackOverflow 帖子的代码： Bootstrap 3 dropdown sub menu missing

【讨论】：

我试图在这方面向我们的用户推销，但他们要求移动设备的子菜单。他们当前的桌面网站有它，而且他们简单地不允许我们从导航中删除菜单。我已经尝试过 smartmenus，但是 AngularJS 有很多问题，如果你使用指令动态构建菜单，它似乎不起作用。 vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html
我最终创建了一个指令，并在此处发布了链接和答案。
我只是喜欢人们决定什么在网络上占有一席之地，什么没有......

【解决方案2】：

您可以使用“下拉子菜单”类来实现这一点。

<div class="btn-group dropdown">
  <button class="dropdown-toggle">Toggle</button>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="dropdown-submenu">
      Sub List
      <ul class="dropdown-menu">
        <li>Submenu Item 1</li>
        <li>Submenu Item 2</li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：

【解决方案3】：

您可以使用 ng-bootstrap-submenu 模块来获取您要查找的子菜单。

https://www.npmjs.com/package/ng-bootstrap-submenu

这是一个 plnkr 演示它的用法。

<nav class="navbar navbar-default">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand">ng-bootstrap-submenu</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <bootstrap-submenu ng-repeat="item in menuItems" menu-item="item">
        </bootstrap-submenu>
      </ul>
    </div>
</nav>

【讨论】：

plnkr 链接到一个空插件。编写的代码本身不能工作。
不知道为什么链接停止工作。我更正了它，正如您在 plnk 中看到的那样，它确实有效