How to format using content from Ng-Repeat taken from Angular JS?

Question

This is probably a really simple question (I am a bit new to AngularJS), but I have the following code:

<div ng-repeat="result in results" class="result">
   <div class="col-md-2 padding">
    ...
   </div>
</div>

For instance, after it fetches 4 result, I want the results to display on the next line. Is there a way to keep a counter for the results fetched by ng-repeat? Or some indication to make the next result display on the next line?

nullpotent · Answer 1 · 2014-09-12T06:49:48.590

2

You could use $index inside it.

<div ng-if="$index == 3" class="col-md-2 padding">
</div>

edited Sep 12 '14 at 06:49

answered Sep 12 '14 at 06:44

nullpotent

9,162
1
31
42

score 1 · Accepted Answer · answered Sep 12 '14 at 06:56

1

To add a break each fourth row (the plus 1 is since index starts at 0)

<br ng-if="($index+1)%4===0"/>

answered Sep 12 '14 at 06:56

Rickard Staaf

2,650
2
14
14

score 0 · Answer 3 · answered Sep 12 '14 at 06:47

0

$index is built-in counter in ng-repeat, you can use it with ng-if directive:

<br ng-if="$index === 3" />

answered Sep 12 '14 at 06:47

Zaheer Ahmed

28,160
11
74
110

score 0 · Answer 4 · answered Sep 12 '14 at 07:36

You need to change the div tags to the span tags as otherwise by default it will be on a different line. Apart from that you can use the ng-if inorder to place a br tag

HTML Code:

<div ng-app ng-controller="test">
    <span ng-repeat="result in results" class="result">
        <span class="col-md-2 padding">{{result}}
            <br ng-if="(($index+1) % 4) === 0" />
        </span>
    </span>
</div>

Working Fiddle

How to format using content from Ng-Repeat taken from Angular JS?

4 Answers4