0

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 -->
Caballero
  • 11,546
  • 22
  • 103
  • 163
  • 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 Feb 23 '14 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 Feb 23 '14 at 20:20
  • @Caballero Hmmmm... impossible? It is pretty easy to recreate, actually: http://codepen.io/BrianGenisio/pen/mwHtB – Brian Genisio Feb 23 '14 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 Feb 23 '14 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 Feb 23 '14 at 20:54

1 Answers1

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

Community
  • 1
  • 1
tschiela
  • 5,231
  • 4
  • 28
  • 35
  • 1
    Bingo. Was just about to say the same thing with the same link. – Brian Genisio Feb 23 '14 at 20:29
  • 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. http://docs.angularjs.org/error/$injector/unpr?p0=reverseFilterProvider – Brian Genisio Feb 23 '14 at 20:32
  • Thanks for pointing this out. Any idea how to increment `index` though? – Caballero Feb 23 '14 at 20:43
  • 1
    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. – Brian Genisio Feb 23 '14 at 20:58
  • 1
    @BrianGenisio Thanks, that is working now. It was probably not working before due to other errors. – Caballero Feb 23 '14 at 21:16