AngularJS ng-repeat nested loop but unnested element

Question

EDIT: Sorry this is already asked - Adding rows with ng-repeat and nested loop

How do you do this in AngularJS?

foreach(var item in items) {                 <-- How to do this loop

  <tr><td>{{item.Name}}</td></tr>

  foreach(var subitem in item.subitems) {    <-- AND this loop?

    <tr class='sub'><td>{{subitem.Name}}</td></tr>

  }
}

Note that the <tr> element is not nested.

A possible expected result:

<tr><td>Item 1</td></tr>
<tr class='sub'><td>Item 1.1</td></tr>
<tr class='sub'><td>Item 1.2</td></tr>
<tr><td>Item 2</td></tr>

I'd create an array containing all the rows using JavaScript code in the controller, and use a single ng-repeat in the view. — JB Nizet, Apr 27 '15 at 06:42
possible duplicate of [Adding rows with ng-repeat and nested loop](http://stackoverflow.com/questions/15362868/adding-rows-with-ng-repeat-and-nested-loop) — Christian Aichinger, Apr 27 '15 at 06:46
I would follow this stackoverflow answer: https://stackoverflow.com/questions/15362868/adding-rows-with-ng-repeat-and-nested-loop/17533596#17533596?newreg=abc0203e45e043c4ba0e14242143af45 — hirsch, Apr 02 '20 at 15:47

score 0 · Accepted Answer · answered Apr 27 '15 at 06:52

You could achieve this using tbody element as the first ng-repeat container, like this:

<table>
  <tbody ng-repeat="item in items">
    <tr><td>{{item.Name}}</td></tr>
    <tr class="sub" ng-repeat="subitem in item.subitems">
      <td>{{subitem.Name}}</td>
    </tr>
  </tbody>
</table>

AngularJS ng-repeat nested loop but unnested element

1 Answers1