Repeat multiple rows in a table with AngularJS

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

{"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
Jun 29 at 10:05

<td ng-repeat="x in ['a','b','c','d']">Item {{item.id}} Row {{x}}</td>

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
Jun 29 at 10:14

<td>

What's in data?
– Ajay Gupta
Jun 29 at 10:25

data

Its is an array of json object. Have edited the question to demonstrate
– SelketDaly
Jun 29 at 10:34

can you clear more with your code or output you need?
– Adesh Kumar
Jun 29 at 10:35

1 Answer
1

Replace the tag with tbody like this:

tag

tbody

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

tbody

Thats perfect! Thank you
– SelketDaly
Jun 29 at 10:51

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.