Question

我有以下菜单项

[ { "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>

Answer 1

您可以使用ng-repeat-start directive：

<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>

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

Answer 2

在第二个LI上创建并应用指令。从循环中移除第一个LI。在指令中，在第二个LI之前追加第一个LI。

或者，可以将指令应用于父UL，它将遍历每个LI并在其之前附加分隔符。不确定这是否会奏效。

Answer 3

你也可以像

那样嵌套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>

如何使用Angularjs的ng-repeat重复进行两次<li>标记</li>

3 个答案: