Как использовать AngularJS ng-repeat на теге <ul>, не повторяя его?

С помощью этого кода:

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

В итоге я получаю три <ul>, каждый из которых содержит один <li>.

Как я могу получить один <ul> с тремя <li> внутри?

Ответ 1

Вы можете использовать директиву ng-repeat-start:

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

Здесь он работает в plnkr.

Ответ 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