I am currently working on making the code below functional, which involves data being retrieved 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 above code is not functioning as intended. I am incorporating the span element to accommodate two tr elements. The code snippet below works properly:
...
<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>
...
However, this setup only includes one tr, whereas I require two.