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 — Amicable
– Amicable, Commented Feb 10, 2015 at 0:12

Michelle Tilley · Accepted Answer · 2016-05-25 14:43:11Z

49

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.

edited May 25, 2016 at 14:43

answered Nov 23, 2013 at 6:39

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to repeat two more rows to each in AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related