Ng-repeat inside ng-repeat with td for each element - AngularJS

Question

This code gives me a table with items in one column.

Here the data will be as

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 three-column table. how

 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 one column.

Tried to do this, but I couldn't get it to work, can someone help me with this?

Answer 1

You should define your table as follows:

 <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 section Special start and end point for restarting the ngRepeat documentation :

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