ng-repeat list with different content after every x items

Question

I am trying to write a list that show 5 items then some additional content then the next 5 items in the list and keep doing this until the list has finished using ng-repeat.

eg

1
2
3
4
5
extra content
6
7
8
9
10
extra content
11
12
13
14
15

I have it working with the below example however I want the extra content to appear after every 5 items. Using my method below it would be very manual to implement this if I had for example 100 items in the list. Is there a way to inject a break after every x items in the list using ng-repeat or is there a better way to approach this?

see fiddle

<div ng-app="">
        <div ng-init="friends = [
        {name:'John', age:25, gender:'boy'},
        {name:'Jessie', age:30, gender:'girl'},
        {name:'Johanna', age:28, gender:'girl'},
        {name:'Joy', age:15, gender:'girl'},
        {name:'Mary', age:28, gender:'girl'},
        {name:'Peter', age:95, gender:'boy'},
        {name:'Sebastian', age:50, gender:'boy'},
        {name:'Erika', age:27, gender:'girl'},
        {name:'Patrick', age:40, gender:'boy'},
        {name:'Samantha', age:60, gender:'girl'}
      ]">
        <ul class="example-animate-container">
          <li ng-repeat="friend in friends | limitTo: 5">
            [{{$index}}] {{friend.name}} is {{friend.age}} years old.
          </li>
            <li>extra content</li>
          <li ng-repeat="friend in friends | limitTo: 10" ng-if="$index > 5">
            [{{$index}}] {{friend.name}} is {{friend.age}} years old.
          </li>        
        </ul>
      </div>
    </div>

you can have own directive like `ck-repeat="friend in friends"` check if index is divisible by 5 and add your content to it. — Arpit Srivastava, Nov 11 '14 at 11:26

score 4 · Accepted Answer · answered Nov 11 '14 at 11:55

As others have pointed out, ng-repeat-start/end should solve your problem, e.g.:

<li data-ng-repeat-start="friend in friends">
  [{{$index + 1}}] {{friend.name}} is {{friend.age}} years old.
</li>

<li data-ng-repeat-end data-ng-if="$middle && 0 === ($index + 1) % 5">
  extra content
</li>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<div data-ng-app ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
]">
  <ul class="example-animate-container">
    <li data-ng-repeat-start="friend in friends">
      [{{$index + 1}}] {{friend.name}} is {{friend.age}} years old.
    </li>

    <li data-ng-repeat-end data-ng-if="$middle && 0 === ($index + 1) % 5">
      extra content
    </li>
  </ul>
</div>

score 1 · Answer 2 · answered Nov 11 '14 at 11:47

This sounds like a job for ng-repeat-start.

<div ng-app="">
    <div ng-init="friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
    ]">
        <ul class="example-animate-container">
            <li ng-repeat-start="friend in friends">
                [{{$index}}] {{friend.name}} is {{friend.age}} years old.
            </li>
            <li ng-if="(($index+1) % 5) == 0">extra content</li>
            <li ng-repeat-end ng-hide>
                <!-- Just an element to end the loop -->
            </li>
        </ul>
    </div>
</div>

ng-repeat list with different content after every x items

2 Answers2