append some element after every nth element using angular js

Question

I have a ul li structure like below and need to add blank li after every second element, how its possible with ng-repeat in angular js.

    <ul>
<li>content</li>
<li>content</li>
<li class="filler"></li>
<li>content</li>
<li>content</li>
</ul>

    <ul>
<li ng-repeat="item in items">item.content</li>
</ul>

Does this filler element contain anything? Or it is just some kind of spacer? Maybe instead of modifying DOM tree, you should try using styles? I.e defining a style for li:nth-child(2n) — Kędrzu
– Kędrzu, Commented Sep 11, 2015 at 10:40
The filler using for a kind of spacer. So need to be render with class filler. — Jaison James
– Jaison James, Commented Sep 11, 2015 at 10:44
@gaurav Unfortunately I can;t push anything to the json data, because its its huge one and its reusable for another areas. — Jaison James
– Jaison James, Commented Sep 11, 2015 at 10:47

charlietfl · Accepted Answer · 2015-09-11 11:57:04Z

1

One way is to use ng-repeat-start with ng-repeat-end

<li ng-repeat-start="item in items">{{item.content}}</li> 
<li ng-repeat-end ng-if="$index % 2 == 1">Filler</li>
<!--  OR -->
<li ng-repeat-end ng-if="$odd">Filler</li>

If the filler is purely a style element you can use css to manage it without using ng-repeat-end

li:nth-child(odd):after{
  display:block;
  content: ' ';
  /** other filler rules **/
}

DEMO

edited Sep 11, 2015 at 11:57

answered Sep 11, 2015 at 11:37

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

4 Comments

gaurav bhavsar Over a year ago

What %2 does ? in ng-if="$index %2 == 1".

charlietfl Over a year ago

@YOU ohhhh, I never even knew there was a $odd. I knew $last and $first but not that one...perfect thnx

charlietfl Over a year ago

@gauravbhavsar it is a modulo operation. you should look that up in a javascript arithmetic operators reference

gaurav bhavsar Over a year ago

@charlietfl ahh, got it, result should be 1 after dividing by 2. Many thanks.

Collectives™ on Stack Overflow

append some element after every nth element using angular js

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