ng-repeat specify a starting index
AngularjsAngularjs Ng-RepeatAngularjs Problem Overview
How can I specify an index where an ng-repeat directive is going to start instead of zero?
I have a set of results and I just need to specify the starting one, which is different from zero.
Angularjs Solutions
Solution 1 - Angularjs
No need to code anything, angular has done this with the existing built-in limitTo filter. Just use a negative limit. From the docs for the limit
argument:
> The length of the returned array or string. If the limit number is > positive, limit number of items from the beginning of the source > array/string are copied. If the number is negative, limit number of > items from the end of the source array/string are copied. The limit > will be trimmed if it exceeds array.length. If limit is undefined, the > input will be returned unchanged.
So you would use it like so in the template:
<ul>
<li data-ng-repeat="i in list | limitTo: (offset - list.length)">{{i}}</li>
</ul>
where offset
is your start index. See sample plunker.
There is an optional begin
argument so you don't need use a negative limit
but the begin
was not available before angular v1.4 so I have stuck to a negative limit
in my example.
Solution 2 - Angularjs
The answers seems to be quite old,
since angular 1.4.0
the limitTo filter takes two parameters
limitTo: (limit) : (begin)
you can say ng-repeat="item in list | limitTo:50:0"
this seems to be a much effective solution rather using two different filters.
Solution 3 - Angularjs
You can create a filter
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
and then you just use it on the ng-repeat:
<div ng-repeat="item in items | startFrom : 2">{{item.Name}}</div>
Solution 4 - Angularjs
Say you have a list of items
, you can do it like this:
<div ng-repeat="item in items" ng-if="$index >= myIndex">
{{item.Name}}
</div>
Solution 5 - Angularjs
I would create a function that returns the desire subarray. This can go in the controller or the link function of a directive.
<span ng-repeat="item in getSubArray(0, 4)">...</span>
And the function
$scope.getSubArray = function (start, end) {
return array.slice(start, end);
}
Solution 6 - Angularjs
This worked for me:
<element ng-repeat="round in view.rounds track by $index">
<span>{{$index + 1}}</span>
</element>
Solution 7 - Angularjs
This could do the trick...
<div ng-repeat="(i, item) in items">
<p>{{i+1}}</p>
</div>
Solution 8 - Angularjs
A simple but not so attractive way
ng-repeat="item in model | limitTo: 10 | limitTo: -5"
Solution 9 - Angularjs
Here is the result of what I was looking for:
angular.module('starter.filters', []).filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
appended = input.slice(0,start);
initialArray = input.slice(start);
finalArray= initialArray.concat(appended);
return finalArray;
}
return [];
}
});
thanks @emanuel