CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
cybaek
cybaek

Reputation: 875

How to repeat two more rows to each in AngularJS

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>

Upvotes: 24

Views: 12291

Answers (1)

Michelle Tilley
Michelle Tilley

Reputation: 159105

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.

Upvotes: 49

Related Questions