AngularJS: ng-repeat for 2 x - can't use a DIV

Question

I am having an issue i need to repeat the following.. as a group

<tr></tr>
<tr></tr>

I can't surround them with a DIV on put the ng-repeat on there as its invalid for TR i.e.

<div ng-repeat="item in items">
    <tr></tr>
    <tr></tr>
</div>

so i currently have the following implemented

    <tr ng-repeat.....></tr>
    <tr ng-repeat.....></tr>

but the problem is with this there is a collection of 6 items so the first TR renders 6 times and then 6 times for next ...

I am scratching my head trying to get around this but I just can't figure it out.

It would be nice if there was some sort of Div tag that was used for ng-repeat but didn't render an element to the DOM ??

score 29 · Answer 1 · answered Jul 18 '13 at 14:47

29

It looks like the angularjs guys have implemented something along these lines. https://github.com/angular/angular.js/commit/e46100f7097d9a8f174bdb9e15d4c6098395c3f2

So the syntax would be

<tr ng-repeat-start="item in items"></tr>
<tr ng-repeat-end></tr>

answered Jul 18 '13 at 14:47

Rob Lyndon

12,089
5
49
74

There's a discussion about the version of angularjs you need here. http://stackoverflow.com/questions/16900050/angular-js-ng-repeat-across-multiple-elements. Apologies if you end up having to click through a few links, but this will definitely be implemented in a future version. – Rob Lyndon Jul 18 '13 at 17:42
Thanks Rob, I will keep my eye open for that. – Martin Jul 19 '13 at 02:57
This worked perfectly for me to repeat 2 distinct 's within a row. – squillman Aug 12 '15 at 18:28
This solution is more elegant since it is supported officially by `AngularJS` and is more meaningful. This should be the right answer, thanks! – Jeff Tian Jan 06 '16 at 06:05

score 23 · Accepted Answer · answered Jul 18 '13 at 19:06

23

You can put the ng-repeat on a tbody element :

<tbody ng-repeat="item in items">
    <tr>
        <td>{{item.row_one_stuff}}</td>
        <td>{{item.more_row_one_stuff}}</td>
    </tr>
    <tr>
        <td>{{item.row_two_stuff}}</td>
        <td>{{item.more_row_two_stuff}}</td>
    </tr>
</tbody>

answered Jul 18 '13 at 19:06

Sharondio

2,605
13
16

Nice -- I forgot you can have multiple tbody elements. – Rob Lyndon Jul 18 '13 at 19:39
that works, but it's not so nice if your and have different CSS rules (like in bootstrap). – svarog Jul 07 '15 at 11:10

score 3 · Answer 3 · answered Feb 19 '16 at 06:29

3

<tr ng-repeat-start="item in items">
    <td>{{item.data1}}</td>
</tr>
<tr ng-repeat-end>
    <td>{{item.data2}}</td>
</tr>

answered Feb 19 '16 at 06:29

Vikash Kumar

222
3
5

AngularJS: ng-repeat for 2 x - can't use a DIV

3 Answers3