[英]Angular Bootstrap 3 nav-bar submenu will not fire
I have Angular 1.2.1 and Bootstrap 3.0.2 我有Angular 1.2.1和Bootstrap 3.0.2
Plain vanilla nav menu with a drop down works fine but when I try to generate my menu using ng-repeat the submenu will not fire. 带有下拉菜单的普通香草导航菜单效果很好,但是当我尝试使用ng-repeat生成菜单时,子菜单将不会触发。
The HTML: HTML:
<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 suggestion ? 正常的bootstrap html子菜单功能正常..有什么建议吗?
After checking .. 经过检查..
The Angular html Block is not correct, with this adjustment it renders the correct html - the drop down still does not work Angular html块不正确,通过此调整它可以呈现正确的html-下拉菜单仍然无法正常工作
<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>
Two steps: 两步:
Add attr data-toggle="dropdown"
for link. 为链接添加attr data-toggle="dropdown"
。
Update controller, change link: '#'
to link: ''
. 更新控制器,将link: '#'
更改为link: ''
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.