switch ngswitch example angularjs drop-down-menu toggle angular-ui angular-bootstrap

angularjs - example - ngswitch angular 5



Interfaz de usuario de varios niveles de UI angular (3)

Intento utilizar el Alternar desplegable de IU angular para crear un menú desplegable de varios niveles / anidados.

Cuando hago clic en el primer nivel del menú desplegable, simplemente se cierra por completo y no revela el segundo nivel.

He adjuntado un plunkr muy básico para demostrar una versión básica de lo que estoy tratando de lograr.

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

Cualquier ayuda, muy apreciada.

Gracias

Puede usar la clase "menú desplegable" para lograr esto.

<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>

Puede usar el módulo ng-bootstrap-submenu para obtener el submenú que está buscando.

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

Aquí hay un plnkr demostrando su uso.

<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>