Angular JS hide first element of ng-repeat
JavascriptAngularjsAngularjs Ng-RepeatJavascript Problem Overview
How would I hide the first element of an ng-repeat?
<div ng-repeat="item in items" ng-hide="true">
<div>{{ item.value }}</div>
</div>
This works in that the whole ng-repeat block is hidden, but how would I hide only the first item in items? I want to display it completely differently using more prominent html/etc, so it's useful to have it in that list of data.
Javascript Solutions
Solution 1 - Javascript
You can do this
<div ng-repeat="item in items" ng-show="!$first">
<div>{{ item.value }}</div>
</div>
Here are the docs: http://docs.angularjs.org/api/ng.directive:ngRepeat
Solution 2 - Javascript
No need to hide, just use a filter to exclude the first item from the list:
<div ng-repeat="item in items|filter:$index>0">
<div>{{ item.value }}</div>
</div>
Solution 3 - Javascript
There's a simpler solution in more recent versions of Angular.
The filter "limitTo" now supports a "begin" argument (docs):
{{ limitTo_expression | limitTo : limit : begin}}
So you can use it like this in a ng-repeat:
ng-repeat="item in items | limitTo: items.length : 1"
This means that ng-repeat will begin at index 1 (instead of the default index 0) and will continue for the rest of the items array's length (which is less than items.length, but limitTo will handle that just fine).
Solution 4 - Javascript
In case you need to skip last, use ng-if='!$last'.