ng-repeat inside ng-repeat with td for each item - AngularJS

Question

This code gives me a table with the elements in a single column.

Here data will be like this

var data = [[{"id":"1","value":"One"},{"id":"2","value":"Two"},{"id":"3","value":"three"}],[{"id":"4","value":"four"},{"id":"5","value":"five"},{"id":"6","value":"six"}],[{"id":"7","value":"seven"},{"id":"8","value":"eigth"},{"id":"9","value":"nine"}]]

<div id="mydiv">
    <table>
       <tr ng-repeat="rows in data">
           <td ng-repeat="item in rows">{{item.id}}:{{item.value}}</td>
        </tr>
    </table>
</div>

This gives me a table with three column. Like

1:One 2:Two 3:three
4:four 5:five 6:six
7:seven . . .

Along with this I want the table with item.id in one column : in one column and item.value in one column for better readability and not in a single column.

Tried to do that but am not able to get it working, can someone help me with this?

Answer 1

You should define your table this way:

<div id="mydiv">
    <table>
        <tr ng-repeat="rows in data">
            <td ng-repeat-start="item in rows">{{item.id}}</td>
            <td>:</td>
            <td ng-repeat-end>{{item.value}}</td>
        </tr>
    </table>
</div>

For more information see the Special repeat start and end points section of the ngRepeat documentation:

To repeat a series of elements instead of just one parent element, ngRepeat (as well as other ng directives) supports extending the range of the repeater by defining explicit start and end points by using ng-repeat-start and ng-repeat-end respectively. The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed.