AngularJS ng-repeat over multiple tr
angularjs, angularjs-ng-repeat, javascript
Solution
I think `ng-repeat-start` and `ng-repeat-end` might be what you're looking for.
From the docs:
The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed.
Perhaps something like this...
<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>
Problem
I'm trying to get the following code to work (data comes from an 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> ... ``` The code above doesn't work. The reason why I'm using the `span`is because I need two to include two `tr`s. The following does work: ``` ... <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> ... ``` but then I only have one `tr`, and I need two.