Reverse list in ng-repeat

Question

So I have an array that I'm using ng-repeat to render out but I want to reverse this list. Previously I have used a filter which i got from this answer: angular ng-repeat in reverse

But now I get an error: "TypeError: Object # has no method 'slice' at Scope." I'm not sure if this is because of a new version of AngularJS or I'm missing something.

This is my filter code:

.filter('reverse', function () {
return function(items) {
    return items.slice().reverse();
};

This is the code from my view from inside the div:

data-ng-repeat='feed in feeds | reverse'

I'm using firebase to bind a local $scope.feeds object with the backend. — ph3bell, Jan 22 '14 at 15:23
so item may be undefined. please check this und return items without modifiying it or return nothing — michael, Jan 22 '14 at 15:24
https://stackoverflow.com/questions/16261348/descending-order-by-date-filter-in-angularjs — Phil3992, Jun 28 '18 at 15:34
@ph3bell - I suggest you accept ChenR's answer since it's the simplest one that does this in all cases and it's currently at the bottom: https://stackoverflow.com/a/36378649/985026 — MalcolmOcean, Jan 09 '22 at 03:55

score 18 · Answer 1 · answered Nov 19 '14 at 16:51

18

To make the array render in reverse and ordered by 'id', this should work:

data-ng-repeat="feed in feeds | orderBy:'id':true"

Let me know if that works for you.

For your reference: http://jsfiddle.net/byizzy/pgPVU/3/

answered Nov 19 '14 at 16:51

goofie

181
1
3

Perfect.. Thanks... :) – Prasanth Jaya Dec 26 '16 at 10:13

Shay Elkayam · Answer 2 · 2016-01-25T15:47:12.283

12

This is a bit tricky, but for all the people interested in reversing an array without creating new predicate functions and/or modifying the array etc...

ng-repeat="feed in feeds | orderBy:'':true"

or

ng-repeat="feed in feeds | orderBy:'-'"

EXPLANATION
if you leave the second parameter a blank string, then Angular will sort by the default order of the array (index), adding true at the end will enable the reverse parameter of Angular' orderBy

edited Jan 25 '16 at 15:47

answered Jan 25 '16 at 15:21

Shay Elkayam

4,128
1
22
19

1

your suggestion would also sort the array, which is not a desired effect in the OP's question the full solution would be ```orderBy: '[]': true```, so there are 0 predicates and the order is left intact, only reversed – ChenR Apr 02 '16 at 20:56
Thanks! I was looking for a way to reverse the default order. '-' worked for me. – annieXo Feb 08 '17 at 00:03

score 5 · Answer 3 · edited May 04 '16 at 07:17

5

Please use directly Java-script slice function with reverse like this:

data-ng-repeat="item in items.slice().reverse()"

edited May 04 '16 at 07:17

Mikhail_Sam

10,602
11
66
102

answered May 04 '16 at 06:37

Manoj Patidar

1,171
2
11
29

I would avoid using two functions being called from the DOM because it can be very heavy on DOM render time if lists are getting larger. If you absolutely have to go this way then do this reversion in your JS code. Although there are built-in angularjs options listed below in other answers. – Andrew Adam Jun 27 '19 at 13:54

score 3 · Answer 4 · answered Jan 22 '14 at 15:57

3

What is the structure of a single feed? It seems you can use the built-in filter from angular to order it the way you want. For example, if the field "id" is what provides "order" in the array, you would do this:

data-ng-repeat='feed in feeds | orderBy:id'

If you want that reversed, you just do:

data-ng-repeat='feed in feeds | orderBy:id:reverse'

Does that make sense? Not sure you need your own filter. If that is the case, perhaps try debugging (i.e. write to the console or otherwise) to see what you are actually being passed. If it is not an array, that's your problem, otherwise try this instead:

return Array.prototype.slice.call(items).reverse();

Let me know if either of those work for you!

answered Jan 22 '14 at 15:57

Jeremy Likness

7,531
1
23
25

I'm very new to both javascript and angularJS so I'm really sorry if I'm not able to be more specific about kind of types I'm dealing with because quite frankly, I'm not really sure! But I am really thankful for the help I've gotten so far. The structure of the feed looks like this: feedid:{id: 'id of user', meta: 'some description', name: 'name of user'} When a feed get's posted by a user it lands on the bottom, I want it to get rendered on top (Imagine the twitter-feed). – ph3bell Jan 22 '14 at 17:09
I am using Angular 1.13.15 with a post scope variable = [{ title: 'one', upvotes: 500 }, { title: 'two', upvotes: 400 }] and seemingly data-ng-repeat="post in posts | orderBy:upvotes:reverse" won't work, any suggestions? – Chirag May 25 '15 at 05:22

score 1 · Answer 5 · edited Jul 30 '15 at 10:29

1

Hope this will solve your problem

data-ng-repeat='feed in feeds.reverse()'

edited Jul 30 '15 at 10:29

answered Jul 30 '15 at 09:31

Mohamed Abdullah J

349
3
5

score 1 · Answer 6 · answered Apr 02 '16 at 20:59

1

a solution which doesn't sort the array, but only copies and reverses it: ng-repeat="item in items | orderBy : '[]': true"

answered Apr 02 '16 at 20:59

ChenR

161
2
8

score 0 · Answer 7 · answered Oct 16 '20 at 07:45

0

Another Alternative Way to Achieve the AngularJs Reverse is

<div ng-repeat="item in items | orderBy:'$index':true">
  <code>{{item.id}} - {{item.name}}</code>
</div>

answered Oct 16 '20 at 07:45

Mirzan

94
2
13

Reverse list in ng-repeat

7 Answers7