AngularJS ng-repeat over multiple tr
I'm trying to get the following code to work (data comes from an API):
我正在尝试使用以下代码(数据来自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:
上面的代码不起作用。我之所以使用spanis是因为我需要两个包含两个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>
...
but then I only have one tr
, and I need two.
但后来我只有一个tr,我需要两个。
1 个解决方案
#1
5
I think ng-repeat-start
and ng-repeat-end
might be what you're looking for.
我认为ng-repeat-start和ng-repeat-end可能就是你想要的。
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.
ng-repeat-start指令与ng-repeat的作用相同,但会重复所有HTML代码(包括它定义的标记),包括放置ng-repeat-end的结束HTML标记。
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>
更多相关文章
- 为什么我的javascript/jquery代码不能像预期的那样工作?
- 实现浮动广告的代码
- 豆瓣Javascript代码风格规范
- 在seaborn.jointplot中绘制两个分布
- 计算机视觉相关代码片段(Python)
- 120行python代码解锁10000分微信跳一跳
- XGBoost中参数调优的完整指南(含Python-3.X代码)
- 求助:Python是否可以用一行代码来同时给变量赋值并打印变量的值
- 剑指offer python版 数组中只出现一次的两个数字