Question

152

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

rated 0 times [ 159] [ 7] / answers: 1 / hits: 30780 / 9 Years ago, tue, april 14, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anniejulietteb

Add To Favorites

Follow

Total Points: 740

Total Questions: 125

Total Answers: 97

Location: Benin

Member since Fri, Mar 24, 2023

1 Year ago

answered 9 Years ago nestorjarettg · Accepted Answer

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.