AngularJS: ng-repeat for 2 x <tr> - 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 ??

Answer 1

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>

Answer 2

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>

Answer 3

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