2

我有以下菜单项

[ { "name": "Home", "target": "#home", "state": "active", "partial_html": "partials/home.html" }, { "name": "Find", "target": "#find", "partial_html": "partials/find.html", "state": "" }, { "name": "Albums", "target": "#albums", "partial_html": "partials/albums.html", "state": "" } ]

如何使用 ng-repeat 为每个元素获取以下输出（mi 是数组 menuItems 中的一个项目（上面给出了数组定义）。

<li class='divider-vertical'></li>
<li class="{{mi.state}}"><a href="{{mi.target}}" ng-click="setMenuItemActive($event, mi.name)">{{mi.name}}</a></li>
4

3 回答 3

7

您可以使用 ng-repeat-start 指令：

<ul>
   <li class='divider-vertical' ng-repeat-start="airport in airports"></li>
   <li ng-repeat-end class="{{mi.state}}"><a href="{{mi.target}}"
       ng-click="setMenuItemActive($event, mi.name)">{{mi.name}}</a></li>        
</ul>

我希望它也会有所帮助..！

于 2015-12-30T05:31:11.983 回答
1

Create and apply a directive on the 2nd LI. Remove the 1st LI from the loop. In the directive, append the 1st LI before the 2nd LI.

Alternatively, a directive can be applied to the parent UL where it will go through each LI and append the divider before it. Not sure if this will work though.

于 2013-03-26T16:33:24.560 回答
0

您还可以嵌套 ul 标签，例如

<ul>
<li ng-repeat ="..">
<ul>
<li class='divider-vertical'></li>
<li class="{{mi.state}}"><a href="{{mi.target}}" ng-click="setMenuItemActive($event, mi.name)">{{mi.name}}</a></li>
</ul>
</li>
</ul>
于 2013-10-18T11:54:18.297 回答