Repeat multiple rows in a table with AngularJS

Question

I am attempting to create a table in AngularJS which has multiple rows per item. The output needs to be similar to:

<table>
    <tr><td>Item 1 Row a</td></tr>
    <tr><td>Item 1 Row b</td></tr>
    <tr><td>Item 1 Row c</td></tr>
    <tr><td>Item 1 Row d</td></tr>
    <tr><td>Item 2 Row a</td></tr>
    <tr><td>Item 2 Row b</td></tr>
    <tr><td>Item 2 Row c</td></tr>
    <tr><td>Item 2 Row d</td></tr>
</table>

What would be the best way of achieving this? Is there an approach I can take that requires markup like this:

<table>
    <tag ng-repeat="item in data">
        <tr><td>Item {{item.id}} Row a</td></tr>
        <tr><td>Item {{item.id}} Row b</td></tr>
        <tr><td>Item {{item.id}} Row c</td></tr>
        <tr><td>Item {{item.id}} Row d</td></tr>
    </tag>
</table>

EDIT: data will be along these lines:

{"data": [
     {
         "id": 1
     },
     {
         "id": 2
     },
     {
         "id": 3
     }
 ]}

what about another ng-repeat? <td ng-repeat="x in ['a','b','c','d']">Item {{item.id}} Row {{x}}</td> — Aleksey Solovey
– Aleksey Solovey, Commented Jun 29, 2018 at 10:05
Sorry, I've just realised I made a typo in the second code block there. Each <td> should have been in a different row. Editing it now — SelketDaly
– SelketDaly, Commented Jun 29, 2018 at 10:14
Its is an array of json object. Have edited the question to demonstrate — SelketDaly
– SelketDaly, Commented Jun 29, 2018 at 10:34

DeclanMcD · Accepted Answer · 2018-06-29 10:37:44Z

3

Replace the tag with tbody like this:

<table>
    <tbody ng-repeat="item in data">
        <tr><td>Item {{item.id}} Row a</td></tr>
        <tr><td>Item {{item.id}} Row b</td></tr>
        <tr><td>Item {{item.id}} Row c</td></tr>
        <tr><td>Item {{item.id}} Row d</td></tr>
    </tbody>
</table>

This will work.

Your table will have multiple tbody tags if that isn't an issue.

answered Jun 29, 2018 at 10:37

DeclanMcD

1,5864 gold badges23 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SelketDaly Over a year ago

Thats perfect! Thank you

Collectives™ on Stack Overflow

Repeat multiple rows in a table with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related