I am looking to create a table using an array with the following structure:
var items = [
{
name: 'xxx',
configurations: [
{
image: 'aaa.jpg'
},
{
image: 'bbb.jpg'
},
...
]
},
{
name: 'yyy',
configurations: [
{
image: 'ccc.jpg'
},
{
image: 'ddd.jpg'
},
...
]
},
...
]
My goal is to have a single row displaying all images from each element within the array. Each image should be enclosed in its own <td> tags, like so:
<tr>
<td>
<img src="aaa.jpg">
</td>
<td>
<img src="bbb.jpg">
</td>
<td>
<img src="ccc.jpg">
</td>
<td>
<img src="ddd.jpg">
</td>
</tr>
I am using Angular and my current code is as follows:
<tr>
<td ng-repeat-start="proposition in items">
<img ng-src="{{::proposition.configurations[0].image}}" />
</td>
<td ng-repeat-end>
<img ng-src="{{::proposition.configurations[1].image}}" />
</td>
</tr>
However, since the number of configurations within each proposition is dynamic, how can I iterate through them while maintaining the same HTML structure?