AngularJS ng-repeat 多个 tr答案

【问题标题】：AngularJS ng-repeat over multiple trAngularJS ng-repeat 多个 tr
【发布时间】：2014-02-27 19:06:59
【问题描述】：

我正在尝试使以下代码工作（数据来自 API）：

...
<tbody ng-repeat="verbinding in data.connection" style="border-bottom:2px solid black;">

    <tr>
        <td></td>
        <td></td>
        <td>{{verbinding.departure.time  * 1000 | date:'HH:mm'}}</td>
        <td>{{verbinding.departure.platform}}</td>
        <td><a href="/liveboard/{{verbinding.departure.stationinfo.id}}">{{verbinding.departure.station}}</td>
    </tr>

    <tr ng-if="verbinding.departure.vehicle == verbinding.arrival.vehicle">
        <td colspan = "5" style="text-align:center;">{{verbinding.departure.vehicle}}</td>
    </tr>
<span ng-if="verbinding.departure.vehicle != verbinding.arrival.vehicle" ng-repeat="via in verbinding.vias.via">
    <tr>
        <td>{{via.arrival.time * 1000 | date:'HH:mm'}}</td>
        <td>{{via.arrival.platform}}</td>
        <td>{{via.departure.time * 1000 | date:'HH:mm'}}</td>
        <td>{{via.departure.platform}}</td>
        <td><a href = "/liveboard/{{via.stationinfo.id}}">{{via.station}}</a></td>
    </tr>
    <tr>
        <td colspan = "5">{{via.vehicle.id}}</td>
    </tr>
</span>
...

上面的代码不起作用。我使用span的原因是因为我需要两个来包含两个trs。以下确实有效：

...
<tr ng-if="verbinding.departure.vehicle != verbinding.arrival.vehicle" ng-repeat="via in verbinding.vias.via">
    <td>{{via.arrival.time * 1000 | date:'HH:mm'}}</td>
    <td>{{via.arrival.platform}}</td>
    <td>{{via.departure.time * 1000 | date:'HH:mm'}}</td>
    <td>{{via.departure.platform}}</td>
    <td><a href = "/liveboard/{{via.stationinfo.id}}">{{via.station}}</a></td>
</tr>
...

但是我只有一个tr，我需要两个。

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

我认为ng-repeat-start 和ng-repeat-end 可能是您要找的。p>

来自docs：

ng-repeat-start 指令的工作方式与 ng-repeat 相同，但会重复所有 HTML 代码（包括定义它的标记），直到并包括放置 ng-repeat-end 的结束 HTML 标记。

大概是这样的……

<tbody ng-repeat="verbinding in data.connection" style="border-bottom:2px solid black;">

    <tr>
        <td></td>
        <td></td>
        <td>{{verbinding.departure.time  * 1000 | date:'HH:mm'}}</td>
        <td>{{verbinding.departure.platform}}</td>
        <td><a href="/liveboard/{{verbinding.departure.stationinfo.id}}">{{verbinding.departure.station}}</td>
    </tr>

    <tr ng-if="verbinding.departure.vehicle == verbinding.arrival.vehicle">
        <td colspan = "5" style="text-align:center;">{{verbinding.departure.vehicle}}</td>
    </tr>
    <tr ng-repeat-start="via in verbinding.vias.via">
        <td>{{via.arrival.time * 1000 | date:'HH:mm'}}</td>
        <td>{{via.arrival.platform}}</td>
        <td>{{via.departure.time * 1000 | date:'HH:mm'}}</td>
        <td>{{via.departure.platform}}</td>
        <td><a href = "/liveboard/{{via.stationinfo.id}}">{{via.station}}</a></td>
    </tr>
    <tr ng-repeat-end>
        <td colspan = "5">{{via.vehicle.id}}</td>
    </tr>
</tbody>

【讨论】：

好吧，这就是工作。谢谢你的回答。