Irregular table repetitions using JavaScript and Angular.JS

Question

I would like to iterate over some data as follows:

<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 ...] will also use the "item in val.items" object, but {{item.ingredients}} is not a valid expression there because it is outside of <td> with the object I want to use to create more columns.

An example of what it will look like: http://jsfiddle.net/yj7xopgy/

Is there a way to do something like this?

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