How to repeat two more rows to each in AngularJS

Question

The following table row is typical.

<tr ng-repeat="item in items">
    <td>{{item.id}}</td>
    <td>{{item.subject}}</td>
    <td>{{item.author}}</td>
    <td>{{item.date}}</td>
</tr>

but, how to repeat two rows to each?

<tr ??>
    <td rowspan=2>{{item.id}}</td>
    <td colspan=2>{{item.subject}}</td>
</tr>
<tr ??>
    <td>{{item.author}}</td>
    <td>{{item.date}}</td>
</tr>

possible duplicate of [Angular.js ng-repeat across multiple trs](http://stackoverflow.com/questions/12979205/angular-js-ng-repeat-across-multiple-trs) — Amicable, Feb 10 '15 at 00:12

Michelle Tilley · Accepted Answer · 2016-05-25T14:43:11.947

If you're using AngularJS 1.2+, you can use ng-repeat-start and ng-repeat-end:

<tr ng-repeat-start="item in items">
    <td rowspan=2>{{item.id}}</td>
    <td colspan=2>{{item.subject}}</td>
</tr>
<tr ng-repeat-end>
    <td>{{item.author}}</td>
    <td>{{item.date}}</td>
</tr>

See "Special repeat start and end points" in the ngRepeat docs.

Otherwise, you have to resort to some nasty tricks, like wrapping the trs in a tbody element and repeating that.

How to repeat two more rows to each in AngularJS

1 Answers1