I am currently using Angular 1.2.1 and Bootstrap 3.0.2.
When I try to generate a menu using ng-repeat in my plain vanilla nav menu with a drop down, the submenu does not function as expected.
Here is the HTML code:
<ul class="nav navbar-nav" ng-repeat="data in main_menu">
<li ng-class="{'dropdown' : data.nodes}">
<a href="{{data.link}}" ng-class="{'dropdown-toggle' : data.nodes}">{{data.name}} <b class="caret" ng-if="data.nodes"></b>
<ul ng-if="data.nodes" ng-repeat="items in data.nodes" class="dropdown-menu">
<li><a href="{{items.link}}">{{items.name}}</a></li>
</ul>
</li>
</ul>
In the Controller:
$scope.main_menu = [
{
name: 'Home',
class: '',
link: '/',
nodes: false
},
{
name: "DropDown",
class: 'dropdown-toggle',
link: '#',
nodes: [
{
name: "Node2",
class: '',
link: 'link'
},
{
name: "Node2",
class: '',
link: 'link'
},
{
name: "Node2",
class: '',
link: 'link'
},
{
name: "Node2",
class: '',
link: 'link'
}
]
}
];
The normal bootstrap html submenu function works fine. Any suggestions on how to fix this issue?
After checking further...
The original Angular html Block has some incorrect syntax. With the adjustments made below, it now renders the correct html - however, the dropdown still does not work correctly.
<ul class="nav navbar-nav" >
<li ng-repeat="data in main_menu" ng-class="{'dropdown' : data.nodes}">
<a href="{{data.link}}" ng-class="{'dropdown-toggle' : data.nodes}">{{data.name}} <b class="caret" ng-if="data.nodes"></b></a>
<ul ng-if="data.nodes" class="dropdown-menu">
<li ng-repeat="items in data.nodes"><a href="{{items.link}}">{{items.name}}</a></li>
</ul>
</li>
</ul>