AngularJS: ng-repeat index and limit error

Question

I'm using AngularJS 1.2.13.

This is not working. I'm getting an error of couple dozen lines with minimized code, so that's not helpful. Can someone tell me what could be wrong here?

My goal is this: display data from two-dimensional array in a table in a reverse order, limit number of rows to 5. The data is being updated live (rows added to array).

<tr ng-repeat="row in data track by $index | limitTo:5 | reverse">
    <td>{{$index}}</td>
    <td ng-repeat="col in row">
        {{col}}
    </td>
</tr>

Another thing: is it possible to display something like {{$index + 1}}? As in - display data as 1-based indexing instead of zero based indexing.

UPDATE: This is the error I'm getting on page refresh:

Error: [$injector:unpr] http://errors.angularjs.org/1.2.13/$injector/unpr?p0=reverseFilterProvider%20%3C-%20reverseFilter
E/<@http://localhost:9001/assets/javascripts/angular.min.js:6
ac/l.$injector<@http://localhost:9001/assets/javascripts/angular.min.js:32
c@http://localhost:9001/assets/javascripts/angular.min.js:30
ac/p.$injector<@http://localhost:9001/assets/javascripts/angular.min.js:32
c@http://localhost:9001/assets/javascripts/angular.min.js:30
Cc/this.$get</<@http://localhost:9001/assets/javascripts/angular.min.js:116
Za.prototype.filter@http://localhost:9001/assets/javascripts/angular.min.js:159
Za.prototype.filterChain@http://localhost:9001/assets/javascripts/angular.min.js:159
Za.prototype.statements@http://localhost:9001/assets/javascripts/angular.min.js:159
Za.prototype.parse@http://localhost:9001/assets/javascripts/angular.min.js:156
zd/this.$get</<@http://localhost:9001/assets/javascripts/angular.min.js:92
ye</<.link@http://localhost:9001/assets/javascripts/angular.min.js:185
I@http://localhost:9001/assets/javascripts/angular.min.js:49
h@http://localhost:9001/assets/javascripts/angular.min.js:42
h@http://localhost:9001/assets/javascripts/angular.min.js:42
h@http://localhost:9001/assets/javascripts/angular.min.js:42
h@http://localhost:9001/assets/javascripts/angular.min.js:42
h@http://localhost:9001/assets/javascripts/angular.min.js:42
h@http://localhost:9001/assets/javascripts/angular.min.js:42
h@http://localhost:9001/assets/javascripts/angular.min.js:42
Y/<@http://localhost:9001/assets/javascripts/angular.min.js:42
ue</<.link@http://localhost:9001/assets/javascripts/angular.min.js:183
I@http://localhost:9001/assets/javascripts/angular.min.js:49
h@http://localhost:9001/assets/javascripts/angular.min.js:42
Y/<@http://localhost:9001/assets/javascripts/angular.min.js:42
ba/<@http://localhost:9001/assets/javascripts/angular.min.js:43
p@http://localhost:9001/assets/javascripts/angular.min.js:47
te</<.compile/</</<@http://localhost:9001/assets/javascripts/angular.min.js:183
q/g.success/<@http://localhost:9001/assets/javascripts/angular.min.js:67
Bd/e/l.promise.then/B@http://localhost:9001/assets/javascripts/angular.min.js:94
Bd/e/l.promise.then/B@http://localhost:9001/assets/javascripts/angular.min.js:94
Bd/f/<.then/<@http://localhost:9001/assets/javascripts/angular.min.js:95
Cd/this.$get</h.prototype.$eval@http://localhost:9001/assets/javascripts/angular.min.js:103
Cd/this.$get</h.prototype.$digest@http://localhost:9001/assets/javascripts/angular.min.js:101
Cd/this.$get</h.prototype.$apply@http://localhost:9001/assets/javascripts/angular.min.js:104
g@http://localhost:9001/assets/javascripts/angular.min.js:68
I@http://localhost:9001/assets/javascripts/angular.min.js:72
qd/</y.onreadystatechange@http://localhost:9001/assets/javascripts/angular.min.js:73

<!-- ngRepeat: row in score track by $index | limitTo:5 | reverse -->

Can you post what error are you getting? Also, it becomes easier for people to help if you post a plunk/fiddle demonstrating your issue. — shubhangi
– shubhangi, Commented Feb 23, 2014 at 20:14
@shubhangi I've posted the error. I didn't do the fiddle because it would be impossible to recreate conditions of dynamic updating of the array. — Caballero
– Caballero, Commented Feb 23, 2014 at 20:20
@Caballero Hmmmm... impossible? It is pretty easy to recreate, actually: codepen.io/BrianGenisio/pen/mwHtB — Brian Genisio
– Brian Genisio, Commented Feb 23, 2014 at 20:33
@BrianGenisio I meant that the array is being updated (appended) live with data pushed from the server via websocket - if this is a contributing factor to this problem I can't reproduce it on jsfiddle. — Caballero
– Caballero, Commented Feb 23, 2014 at 20:48
@Caballero But it clearly isn't a contributing factor and it is very easy to test for. Don't assume your problem is more complex than it is. Tools like Codepen/JsFiddle are really great for isolating problems and debugging. They are also really great for communicating your problem to others. It is worth a try before dismissing as "impossible". — Brian Genisio
– Brian Genisio, Commented Feb 23, 2014 at 20:54

Community · Accepted Answer · 2017-05-23 12:24:12Z

2

reverse filter is no out of the box filter of angularjs. You have to implement yourself. An example can be found here: angular ng-repeat in reverse

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Feb 23, 2014 at 20:21

tschiela

5,2714 gold badges30 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Brian Genisio Over a year ago

Bingo. Was just about to say the same thing with the same link.

Brian Genisio Over a year ago

Notice, also, that at the top of the error stack, they tell you what the problem is with a link to the description. Angular wasn't able to inject the reverse service. docs.angularjs.org/error/$injector/…

Caballero Over a year ago

Thanks for pointing this out. Any idea how to increment index though?

Brian Genisio Over a year ago

If you want to display the $index as incremented, you can just write {{$index + 1}} and you don't need to "track by $index" to make it happen. Only "track by $index" if you have a good reason to do so. Like when the values in an array might be non-unique. Like [1, 3, 1, 5] for instance. You might "track by $index" in your inner ng-repeat, for that reason, but I doubt "track by $index" is necessary in your outer loop.

Caballero Over a year ago

@BrianGenisio Thanks, that is working now. It was probably not working before due to other errors.

Collectives™ on Stack Overflow

AngularJS: ng-repeat index and limit error

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related