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

Question

当我使用 Angular ng-repeat带有 <li> 的指令元素，我在每个 <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>

将创建如下内容:

但是没有 Angular 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>