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?
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>
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>