我正在尝试使用 anuglar.js 和 Bootstrap 构建动态菜单。此菜单需要具有下拉功能。我已经获取了基本菜单,但现在我正在尝试添加下 zipper 接,但我无法获得正确生成的选项。
我有一个带有菜单项的变量,如下所示:
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: '#/'
}
]
}
];
当 drop
为 true
时,我想要一个下拉菜单来生成 sub
项,而当它为 时,只是一个常规菜单项>假
。
到目前为止,这是我的 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>
现在一切都作为正常链接生成。
最佳答案
我认为 ng-if
是问题所在。改变这个:
ng-if="drop == nav.drop"
为此:
ng-if="nav.drop"
还有这个:
ng-if="drop != nav.drop"
为此:
ng-if="!nav.drop"
顺便说一句,我同意评论者的观点,即 ng-repeat="nav in nav"
令人困惑。
编辑:
如何获取一个列表而不是两个:
<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>
关于javascript - 动态 Angular.js 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29872848/