AngularJS. Nested ng-repeat

Question

I'm using ng-repeat directive with ng-repeat-start/ng-repeat-end options. Also inside main loop I have another inner ng-repeat. But the problem is that my outer ng-repeat-start declaration used just for declaration the loop, actually I'm don't need to repeat the HTML element on which is declared. See example below:

<tbody>
    <tr ng-repeat-start="anArray in arrayOfArrays">  <!-- HOW TO REMOVE THIS EMPTY <tr>? -->

    </tr>

    <tr ng-repeat="item in anArray ">
        <td>{{item .name}}</span></td>
        <td>{{item .surname}}</td>
    </tr>

    <tr ng-repeat-end>
        <td>
            <span>Total</span>
        </td>
    </tr>
</tbody>

How I can remove the <tr> element but preserve the loop declaration?

I tried to declare both loop (outer and inner) on same <tr> element, but it doesn't work:

  <tr ng-repeat-start="anArray in arrayOfArrays" ng-repeat="item in anArray ">          
  </tr>

Eduardo Lelis · Accepted Answer · 2014-08-03 02:37:33Z

1

If you want to repeat everything in the outer loop you can use the <tbody> do the repeat. Code below:

<tbody ng-repeat="anArray in arrayOfArrays">
    <tr ng-repeat="item in anArray ">
        <td>{{item .name}}</span></td>
        <td>{{item .surname}}</td>
    </tr>
    <tr>
        <td>
            <span>Total</span>
        </td>
    </tr>
</tbody>

If you want to repeat only the inner loop multiple times and show the total a single time you might try dividing your table in two elements like:

<tbody ng-repeat="anArray in arrayOfArrays">
    <tr ng-repeat="item in anArray ">
        <td>{{item .name}}</span></td>
        <td>{{item .surname}}</td>
    </tr>
</tbody>
<tfooter>
      <tr>
        <td>
            <span>Total</span>
        </td>
      </tr>
</tfooter>

answered Aug 3, 2014 at 2:37

Eduardo Lelis

4053 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

AngularJS. Nested ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related