I have been developing a navigation menu that includes nested sub menus. I am interested in making the menus expandable upon clicking the parent menu item.
Below is my HTML code snippet showcasing 2 ng-repeat functions within the parent menu item, as well as an additional one for any sub-menu items containing further sub-menus.
<div id="sidebar-wrapper" ng-controller="navigationController" style="overflow-y: auto; margin-top:-20px;" class="hidden-print" ng-hide="hideSidebar()">
<nav role="navigation" class="navbar navbar-default navbar-bigfont" style="border-width: 0">
<ul class="nav nav-pills nav-stacked">
<li class="portal-text-19b" ng-repeat="item in newMenu" ng-class="{active: hightlight === item.title && item.path !== '#'}" ng-show="showItem(item.path, item.allowAll)">
<a style="text-transform: uppercase" href="{{item.path}}" ng-click="item.fn()">
<span class="{{item.icon}}"></span> {{item.title}}
<span style="font-size: 7px;" ng-if="item.childs" class="glyphicon glyphicon-play"></span>
</a>
<ul class="nav nav-pills nav-stacked">
<li style="list-style-type: none;" ng-repeat="child in item.childs" ng-class="{active: hightlight === child.title && child.path !== '#'}" ng-show="showItem(child.path, child.allowAll)">
<a href="{{child.path}}" ng-click="child.fn()">
<span class="{{child.icon}}"></span> {{child.title}}
</a>
<ul class="nav nav-pills nav-stacked">
<li style="list-style-type: none;" ng-repeat="child2 in child.childs" ng-class="{active: hightlight === child2.title && child2.path !== '#'}" ng-show="showItem(child2.path, child2.allowAll)">
<a href="{{child2.path}}" ng-click="child2.fn()">
<span class="{{child2.icon}}"></span> {{child2.title}}
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>