如何在 <ul> 标签上使用 AngularJS ng-repeat 而不重复？答案

【问题标题】：How to use AngularJS ng-repeat on <ul> tag without repeating it?如何在 <ul> 标签上使用 AngularJS ng-repeat 而不重复？
【发布时间】：2018-02-06 19:57:55
【问题描述】：

使用此代码：

<ul data-ng-repeat="airport in airports">
            <li>{{airport.code}}</li>
            <li>{{airport.city}}</li>
            <li>{{airport.name}}</li>
</ul>

我最终得到三个 <ul>，每个里面都有一个 <li>。

我怎样才能得到一个 <ul> 和三个 <li> 里面？

【问题讨论】：

很清楚不是吗？他想重复 ul 中的内容，而不是 ul 本身。

标签： angularjs ng-repeat

【解决方案1】：

你可以使用ng-repeat-start directive:

<ul>
    <li ng-repeat-start="airport in airports">{{airport.code}}</li>
    <li>{{airport.city}}</li>
    <li ng-repeat-end>{{airport.name}}</li>
</ul>

它在plnkr 中工作。

【讨论】：

需要注意的是，这仅适用于 1.2 候选版本，在此之前 ng-repeat-start 不存在。
谢谢！我已经尝试过重复开始和结束，它没有工作，但我会再试一次
感谢 Erik，我学习了一个教程，源代码使用了旧版本的 angular。

【解决方案2】：

你可以这样做：

<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    </head>

    <body>
        <ul>
            <li ng-repeat='i in [1,2,3]'>{{i}}</li>
        </ul>
    </body>
</html>

【讨论】：

【解决方案3】：

您可以将 ng-repaet 用作：

<ul>
    <li ng-repeat="rp in $ctrl.repeat">{{rp}}</li>
</ul>

{{rp}}重复对象x次

输出应该是这样的：

.list 1

.list 2

.list 3

【讨论】：