Irregular repetitions in table using JavaScript and Angular.JS

Question

I would like to iterate over some data like this:

<table>
    <tr ng-repeat="(k,val) in items">
        <td>{{k}} {{val.style}}</td>
        <td ng-repeat="(k2, item) in val.items">{{item.title}}</td>
        <td>{{item.ingredients}}</td> <-- (a)
        <td>{{item.moreInfo}}</td> <-- (b)
    </tr>
</table>

(a) and (b) [and c, d, e...] would also use the object "item in val.items", but {{item.ingredients}} is not a valid expression there, because it is out of the <td> with the object that I want to use to create more columns.

Example of what it would look like: http://jsfiddle.net/yj7xopgy/

Is there any way to do something like that?

Answer 1

Use ng-repeat-start and ng-repeat-end.

<td ng-repeat-start="(k2, item) in val.items">{{item.title}}</td>
<td>{{item.ingredients}}</td> 
<td ng-repeat-end>{{item.moreInfo}}</td>

Updated Fiddle