Geek asks and answers

AngularJS: repeat after specific index

I am using AngularJS and I have a requirement in which I need to repeat an element after a specific 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 I want it to be <i class="icon-trash"></i>repeated only after index 3. This is from the fourth stone forward, I want to see the basket. How to achieve this?

+5
source share
2 answers

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>

Starting with version 1.1.5 , you can leave unwanted elements outside the DOM with

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

You can just hide it in the first three 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>
+3
source

More articles:


All Articles