Adding rows with ng-repeat and nested loop

Question

I'm looking for a way to add rows to a table. My data structure looks like that:

  rows = [     { name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },     { name : 'row2' }   ]; 

I want to create a table which looks like that:

  table      row1      row1.1      row1.2      row2 

Is that possible with angular js ng-repeat? If not, what would be a "angular" way of doing that?

Edit: Flatten the array would be a bad solution because if i can iterate over the sub elements i could use different html tags inside the cells, other css classes, etc.

Answer 1

More than one year later but found a workaround, at least for two levels (fathers->sons).
Just repeat tbody's:

<table>   <tbody ng-repeat="row in rows">     <tr>       <th>{{row.name}}</th>     </tr>     <tr ng-repeat="sub in row.subrows">       <td>{{sub.name}}</td>     </tr>   </tbody> </table> 

As far as I know all browsers support multiple tbody elements inside a table.

Answer 2

More than 3 years later, I have been facing the same issue, and before writing down a directive I tried this out, and it worked well for me :

<table>     <tbody>         <tr ng-repeat-start="row in rows">             <td>                 {{ row.name }}             </td>         </tr>         <tr ng-repeat-end ng-repeat="subrow in row.subrows">             <td>                 {{ subrow.name }}             </td>         </tr>     </tbody> </table>