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
– JB Nizet, Commented Apr 27, 2015 at 6:42
possible duplicate of Adding rows with ng-repeat and nested loop — Christian Aichinger
– Christian Aichinger, Commented Apr 27, 2015 at 6:46
I would follow this stackoverflow answer: stackoverflow.com/questions/15362868/… — hirsch
– hirsch, Commented Apr 2, 2020 at 15:47

jmustonen · Accepted Answer · 2015-04-27 06:52:30Z

0

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>

answered Apr 27, 2015 at 6:52

jmustonen

4703 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS ng-repeat nested loop but unnested element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related