Insert a row with two columns every four ng-repeat values

Question

I have the next code in Html and AngularJS:

<div class='row'>
    <div class='col-md-6' ng-repeat='post in news'>
        <div class='post-content'>{{ post.title }}</div>
    </div>
</div>

Now, what I need is to push a row with two columns every four posts.

<div class='row'>
    <div class='col-md-6'>
        <div class='add-content'>Something</div>
    </div>
    <div class='col-md-6'>
        <div class='add-content'>Something</div>
    </div>
</div>

How do I do it in AngularJS?

The DOM result what I'm looking for is:

<div class='row'>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
</div>
<div class='row'>
    <div class='col-md-6'>
       <div class='add-content'>Something</div>
    </div>
    <div class='col-md-6'>
        <div class='add-content'>Something</div>
    </div>
</div>
<div class='row'>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
...

Where is your ngRepeat? stackoverflow.com/help/mcve

maurycy
– maurycy

2017-04-08 22:52:10 +00:00
Commented Apr 8, 2017 at 22:52 — maurycy
– maurycy, Commented Apr 8, 2017 at 22:52
Where does content come from for class='add-content' ?

charlietfl
– charlietfl

2017-04-09 03:56:08 +00:00
Commented Apr 9, 2017 at 3:56 — charlietfl
– charlietfl, Commented Apr 9, 2017 at 3:56

Chris Noring · Accepted Answer · 2017-04-09 00:03:16Z

2

essentially you need to be using the built in $index which keeps track on the index it is currently on. Every fourth item implies it should be divisible by four. You also need an ng-if statement to determine wether a dom snippet should be added on said item. Also this calls for the use of the ng-repeat-start instead of ng-repeat. Its seldom used but for this purpose it should work. Code below :

   <div class='row' ng-repeat-start="post in news" >
      <div class='post-content'>{{ post.title }}</div>
   </div> 
   <div class="row" ng-repeat-end  ng-if="($index +1 ) % 4 === 0" >
      <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
      </div>
      <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
      </div>
   </div>

edited Apr 9, 2017 at 0:03

answered Apr 8, 2017 at 23:19

Chris Noring

4713 silver badges9 bronze badges

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

4 Comments

lin Over a year ago

Modulo is a nice approach but it's not working as the user expects.

lin Over a year ago

It should be ($index+1) % 4 === 0. You are lucky, I was up to post exactly the same answer ;)

charlietfl Over a year ago

This doesn't produce expected results

Chris Noring Over a year ago

what makes you say that? @charlietfl ?

Collectives™ on Stack Overflow

Insert a row with two columns every four ng-repeat values

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related