Interruttore a discesa multi-livello UI angolare

Question

Sto provando a utilizzare l'interfaccia utente angolare Dropdown Toggle per creare un menu a discesa multi livello/annidato.

Quando faccio clic sul primo livello del menu a discesa, semplicemente si chiude completamente e non rivela il secondo livello.

Ho allegato un plunkr molto semplice per dimostrare una versione nuda di quello che sto cercando di ottenere.

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

Qualsiasi aiuto, molto apprezzato.

Grazie

Answer 1

È possibile utilizzare la classe "discesa-sottomenu" per raggiungere questo obiettivo.

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

Answer 2

Il sottomenu è stato rimosso da Boostrap 3 poiché è ritenuto irrilevante per i dispositivi mobili.

"Sottomenu semplicemente non hanno molto di un posto sul web in questo momento, in particolare il web mobile Essi saranno rimossi con 3,0." - https://github.com/twbs/bootstrap/pull/6342

Un esempio che utilizza Bootstrap 3.0. 0 (finale): http://bootply.com/86684

Codice da StackOverflow postale: Bootstrap 3 dropdown sub menu missing

Answer 3

È possibile utilizzare il modulo sottomenu ng-bootstrap per ottenere il sottomenu che si sta cercando.

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

Ecco un plnkr dimostrazione è l'utilizzo.

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