Question

我遇到了一个我需要用Angular做的foreach。

这就是我想做的事情：

<ul>
    <div ng-repeat="g in groups">
        <li ng-repeat="c in g.commands">{{c.text}}</li>
        <li class="divider"></li>
    </div>
</ul>

我如何做这样的事情，但是在有效的HTML结构中呢？（<div>和<ul>之间没有<li>

我只看到一个解决方案：

将<div>替换为<ul>并制定大量css规则以使其不存在

另外，我使用Angular 1.4.8。

谢谢！

Answer 1

可能最简单的方法是使用绑定到代码中角度范围的自定义集合groupedCommands，并按正确的顺序包含项目。

然后使用ng-repeat-start作为增强型重复指令。您可以在此案例中使用特殊的ng-repeat-start和ng-repeat-end属性组合：

<ul>
   <li ng-repeat-start="c in groupedCommands">{{c.text}}</li>
   <li class="divider" ng-repeat-end></li>
</ul>

Answer 2

您根本不必更改数据结构。相反，只需使用ng-repeat-start＆amp; ng-repeat-end指令。您将拥有单独的<ul>，但就渲染而言，您可以轻松修改CSS，使其显示为无缝列表。

<ul ng-repeat-start="g in groups">
    <li ng-repeat="c in g.commands">{{c.text}}</li>
    <li ng-repeat-end class="divider"></li>
</ul>

http://codepen.io/jusopi/pen/KVZBLv

Answer 3

试试这个，

<ul>
    <!-- ng-repeat: g in groups -->
    <span ng-repeat="g in groups">
        <li ng-repeat="c in g.commands">{{c.text}}</li>
        <li class="divider"></li>
    </span>
</ul>

这可以解决您的问题。

警告：在<span>和<ul>之间使用<li>不是一种好方法。

没有html元素的角度ng-repeat

3 个答案: