AngularJS and ngRepeat - insert additional element every n repeats

Question

I am trying to create a structure where every 7 repeated divs there is an additional div inserted. This div has to belong to the parent, and not be a child of one of the repeated divs.

It isn't enough just to change class, the entire content will be different and entirely different ngShow logic will be used with the additional div.

So for example:

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="special-child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="special-child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="special-child"></div>
</div>

That example uses a specific number of divs, the ngRepeat could be any number. It's also important the last result of the ngRepeat puts in an additional div after it, even if it isn't an exact multiple of 7.

The current ngRepeat logic I'm using is:

<div id="parent">
  <div class="child" ng-repeat="o in data"></div>
  <div class="special-child"></div>
</div>

But this doesn't work properly as the additional div is only inserted once after all the repeated divs.

Update with working example

<div id="parent">
  <div class="child" ng-repeat-start="o in data"></div>
  <div class="special-child" ng-if="( $index + 1 ) % 7 == 0 || $last" ng-repeat-end></div>
</div>

This solution requires AngularJS 1.2+

Matheus Lima · Accepted Answer · 2014-05-19 16:17:14Z

13

You need something close to this:

<div ng-repeat="o in data">
  <div class="child"></div>
  <div ng-if="$index % 7 == 0" class="special-child"></div>
</div>

answered May 19, 2014 at 16:17

Matheus Lima

2,1433 gold badges33 silver badges49 bronze badges

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

2 Comments

Matt McDonald Over a year ago

Any ideas of a way that doesn't require repeating the parent? Wanted that as a last resort because it means a lot of CSS changes if I need to add an additional div in-between!

Matt McDonald Over a year ago

In answer to my question. ng-repeat-start and ng-repeat-end appear to be the answer (AngularJS 1.2+). I put ng-repeat-start on the child and ng-repeat-end on the special-child and used a variation of the ng-if as suggested, which gives the result without repeating the parent!

Collectives™ on Stack Overflow

AngularJS and ngRepeat - insert additional element every n repeats

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related