我正在尝试使用ui bootstrap和ng-repeat创建一个菜单,但是我似乎遇到了扩展/折叠下拉列表的问题。如果我不使用ng-repeat,那么下拉行为就像他们应该的那样,所以我必须遗漏一些东西。
以下是相关代码:
<ul class="navigation">
<li data-ng-repeat="menuItem in menuItems" data-is-open="item.open" data-ng-class="{ 'dropdown mm-dropdown' : menuItem.subItems }" data-on-toggle="toggle()" role="menu">
<a href='#' class="dropdown-toggle" data-toggle="dropdown">
<i ng-if="menuItem.icon" class="menu-icon fa {{ menuItem.icon }}"></i>
<span class="mm-text">{{ menuItem.title }}</span>
</a>
<ul class="mmc-dropdown-delay animated fadeInLeft">
<li>
<a tabindex="-1" href="layouts-grid.html"><span class="mm-text">Grid</span></a>
</li>
<li>
<a tabindex="-1" href="layouts-main-menu.html"><i class="menu-icon fa fa-th-list"></i><span class="mm-text">Main menu</span><span class="label label-warning">Updated</span></a>
</li>
</ul>
</li>
<!--This is working-->
<li class="dropdown mm-dropdown" data-on-toggle="toggle()">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="menu-icon fa fa-th"></i>
<span class="mm-text">Layouts</span>
<span class="label label-warning">Updated</span>
</a>
<ul class="mmc-dropdown-delay animated fadeInLeft">
<li>
<a tabindex="-1" href="layouts-grid.html"><span class="mm-text">Grid {{ item.open }}</span></a>
</li>
<li data-ng-class="{ 'active': item.active }">
<a tabindex="-1" href="layouts-main-menu.html"><i class="menu-icon fa fa-th-list"></i><span class="mm-text">Main menu</span><span class="label label-warning">Updated</span></a>
</li>
</ul>
</li>
</ul>
ng-repeat部分中生成的所有菜单项将尝试转到href设置的链接而不是扩展,而底部部分工作正常。
用class =&#34; dropdown mmc-dropdown&#34;替换ng-class部分后一切似乎都很好。
我错过了什么?我刚刚从角度开始,似乎有一些基本的东西,我不理解。
感谢任何帮助。
谢谢,