CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
callmekatootie
callmekatootie

Reputation: 11228

AngularJS: Repeat after a particular index

I am using AngularJS and I have a requirement in which I need to repeat an element after a particular index. So, let's say my code is:

<label ng-repeat="stones in rocks">
    <a href="#">Rock {{$index}}</a>
    <i class="icon-trash"></i>
</label>

Now what I wish is that <i class="icon-trash"></i> be repeated only after index 3. That is from the fourth stone onwards, I wish to see the recycle bin. How do I achieve this?

Upvotes: 5

Views: 6353

Answers (2)

Eugenio Cuevas
Eugenio Cuevas

Reputation: 11078

ng-show can take an expression:

<label ng-repeat="stones in rocks">
    <a href="#">Rock {{$index}}</a>
    <i class="icon-trash" ng-show="$index > 2"></i><!--$index is 0-based-->
</label>

As of version 1.1.5, you can keep the unwanted elements out of the DOM with 

<i class="icon-trash" ng-if="$index > 2"></i>

Upvotes: 11

Stewie
Stewie

Reputation: 60416

You might simply hide it in first 3 iterations, using ng-show:

<label ng-repeat="stones in rocks">
    <a href="#">Rock {{$index}}</a>
    <i class="icon-trash" ng-show="$index>2"></i>
</label>

Upvotes: 3

Related Questions