[英]Dynamic Angular.js menu
I am trying to build a dynamic menu using anuglar.js and bootstrap. 我正在尝试使用anuglar.js和bootstrap构建动态菜单。 This menu needs to have a dropdown ability.
此菜单需要具有下拉功能。 I've gotten the basic menu down but now I'm trying to add a dropdown link and I can't get the options to generate correctly.
我已经掌握了基本菜单,但是现在我试图添加一个下拉链接,但我无法正确生成选项。
I have a variable with the menu items like so: 我的菜单项有一个变量,如下所示:
var nav = [
{
display: 'Home',
link: '#/',
drop: false,
},
{
display: 'Categories',
link: '#/',
drop: true,
sub: [
{
display: 'Sub 1',
link: '#/'
},
{
display: 'Sub 2',
link: '#/'
},
{
display: 'Sub 3',
link: '#/'
}
]
}
];
I want a dropdown menu to generate of the sub
items when drop
is true
and just a regular menu item when it is false
. 我希望
drop
为true
时生成一个sub
菜单的下拉菜单,而false
时只生成一个常规菜单项。
This is my HTML so far: 到目前为止,这是我的HTML:
<ul class="nav navbar-nav">
<li class="dropdown" ng-repeat="nav in nav" ng-if="drop == nav.drop">
<a class="dropdown-toggle" data-toggle="dropdown" href="{{nav.link}}">
{{nav.display}}
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="sub in nav.sub"><a href="{{sub.link}}">{{sub.display}}</a></li>
</ul>
</li>
<li ng-if="drop != nav.drop" ng-repeat="nav in nav">
<a href="{{nav.link}}">{{nav.display}}</a>
</li>
</ul>
Right now everything is generating as a normal link. 现在,一切都在作为普通链接生成。
I think the ng-if
is the problem. 我认为
ng-if
是问题。 Change this: 更改此:
ng-if="drop == nav.drop"
to this: 对此:
ng-if="nav.drop"
and this: 和这个:
ng-if="drop != nav.drop"
to this: 对此:
ng-if="!nav.drop"
Incidentally, I agree with the commenter that ng-repeat="nav in nav"
is confusing. 顺带一提,我同意
ng-repeat="nav in nav"
令人费解的评论员。
EDIT: 编辑:
How to get one list instead of two: 如何获得一个列表而不是两个列表:
<ul class="nav navbar-nav">
<li class="dropdown" ng-repeat="nav in nav">
<a ng-if="!nav.drop" href="{{nav.link}}">{{nav.display}}</a>
<a ng-if="nav.drop" class="dropdown-toggle" data-toggle="dropdown" href="{{nav.link}}">
{{nav.display}}
<b class="caret"></b>
</a>
<ul ng-if="nav.drop" class="dropdown-menu">
<li ng-repeat="sub in nav.sub"><a href="{{sub.link}}">{{sub.display}}</a></li>
</ul>
</li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.