ng-repeat specify a starting index

AngularjsAngularjs Ng-Repeat

Angularjs 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.

https://code.angularjs.org/1.4.0/docs/api/ng/filter/limitTo

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFederico VezzoliView Question on Stackoverflow
Solution 1 - AngularjslogeeView Answer on Stackoverflow
Solution 2 - AngularjsChandra Sekhar WalajapetView Answer on Stackoverflow
Solution 3 - AngularjsEmanuel RalhaView Answer on Stackoverflow
Solution 4 - AngularjsOmri AharonView Answer on Stackoverflow
Solution 5 - AngularjsRauluccoView Answer on Stackoverflow
Solution 6 - AngularjsAndre KuznetcovView Answer on Stackoverflow
Solution 7 - AngularjsArppView Answer on Stackoverflow
Solution 8 - Angularjssyeed masoud tayefiView Answer on Stackoverflow
Solution 9 - AngularjsFederico VezzoliView Answer on Stackoverflow