没有html元素的Angular ng-repeat答案

【问题标题】：Angular ng-repeat without html element没有html元素的Angular ng-repeat
【发布时间】：2016-01-22 00:13:58
【问题描述】：

我遇到了需要使用 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 结构中？（在<ul> 和<li> 之间没有<div>）

我只看到一个解决方案：

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

另外，我使用的是 Angular 1.4.8。

谢谢！

【问题讨论】：

你为什么不使用div？
@AntiHeadshot 结构 <ul> > <div> > <li> 不是有效的 HTML。如果它是一个有效的结构，我肯定会这样做。

标签： javascript html css angularjs

【解决方案1】：

您根本不必更改数据结构。相反，只需使用 ng-repeat-start 和 ng-repeat-end 指令。您将拥有单独的 <ul>s，但在渲染方面，您可以轻松修改 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

【讨论】：

是的，这就是我选择的解决方案。但我希望我可以在没有倍数的情况下进行渲染<ul>。
不幸的是，除非您按照@Sebastian 的建议创建指令或更改数据结构，否则您将无法做到这一点。

【解决方案2】：

可能最简单的方法是使用自定义集合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>

【讨论】：

我知道，但这并不能解决我的问题。我有两个清单要重复。
谢谢，但我更喜欢 jusopi 的回答。

【解决方案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>

这可能会解决您的问题。

注意：在<ul> 和<li> 之间使用<span> 不是一个好方法。

【讨论】：

是的，它会解决我的问题，但这不是好方法。我不能在<ul> 和<li> 之间使用<span>。