javascript - Add a counter to Angular ng-repeat? - Stack Overflow

I am trying to find some documentation for being able to append a counted number to each item returned by an ng-repeat. Is this not an out of a box thing for Angular? Not quite like an Id, but more like, if 4 items returned, each item JSON object could add a number in front of data returned. My code looks like:

<div  class="swipeBoxes" ng-repeat="swipe in swipes">
    <a href="#">
        <div class="swipeBox">
            <span class="swipeNum"></span>
            <p><span>swipe date:</span><span>{{ swipe.date | date: 'MM/dd/yyyy'}}</span></p>
            <p><span>provider:</span><span>{{ swipe.merchant }}</span></p>
            <p><span>amount:</span><span>{{ swipe.amount | currency }}</span></p>
        </div>
    </a>
</div>

I am trying to find some documentation for being able to append a counted number to each item returned by an ng-repeat. Is this not an out of a box thing for Angular? Not quite like an Id, but more like, if 4 items returned, each item JSON object could add a number in front of data returned. My code looks like:

<div  class="swipeBoxes" ng-repeat="swipe in swipes">
    <a href="#">
        <div class="swipeBox">
            <span class="swipeNum"></span>
            <p><span>swipe date:</span><span>{{ swipe.date | date: 'MM/dd/yyyy'}}</span></p>
            <p><span>provider:</span><span>{{ swipe.merchant }}</span></p>
            <p><span>amount:</span><span>{{ swipe.amount | currency }}</span></p>
        </div>
    </a>
</div>

• javascript
• html
• angularjs
• json

Share Improve this question Follow asked Jan 19, 2016 at 22:50 MarkMark 1,87244 gold badges3131 silver badges5454 bronze badges 3

• 3 you can use $index inside of an ng-repeat...is this what you are looking for? – Logan Murphy Commented Jan 19, 2016 at 22:53
• 2 <div ng-repeat="swipe in swipes track by $index"> – Himmel Commented Jan 19, 2016 at 22:54
• 1 Right in the documentation: docs.angularjs/api/ng/directive/ngRepeat – epascarello Commented Jan 19, 2016 at 22:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You can use $index for your counter.

<div  class="swipeBoxes" ng-repeat="swipe in swipes">
    {{$index + 1}}
</div>

Using $index from ngRepeat should be able to solve your problems.