ng-repeat li在每次重复后都有额外的行

Question

当我使用ng-repeat带有<li>元素的angular 指令时,我会在每个后面得到一个额外的行<li>.以下图片的简单示例.

使用angular ng-repeat指令的简单示例:

<ul class="list-group" ng-repeat = "num in [0,1,2,3,4]">
    <li class="list-group-item list-group-item-success">{{num}}</li>
</ul>

将创建类似于:

然而这样做而不角度ng-repeat如

<ul class="list-group">
    <li class="list-group-item list-group-item-success">1</li>
    <li class="list-group-item list-group-item-success">2</li>
    <li class="list-group-item list-group-item-success">3</li>
    <li class="list-group-item list-group-item-success">4A</li>
</ul>

结果是

正如您所知,当我使用该ng-repeat指令时,我在每个重复元素下面得到一个额外的行.是否有一个我遗漏的微妙或有谁知道如何删除额外的线？

Answer 1

您正在重复<ul>当前标记中的元素.视觉差异是因为你基本上渲染这样的东西......

<ul>
    <li>0</li>
</ul>
<ul>
    <li>1</li>
</ul>
<ul>
    <li>2</li>
</ul>
...

相反,改为以下和ng-repeat你的<li>

<ul class="list-group" >
    <li ng-repeat="num in [0,1,2,3,4]" class="list-group-item list-group-item-success">{{num}}</li>
</ul>