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'

Chamness

looks like feeds is not an array... – Polyclinic

I'm using firebase to bind a local $scope.feeds object with the backend. – Chamness

so item may be undefined. please check this und return items without modifiying it or return nothing – Polyclinic

#16261848 – Caracole

@Chamness - 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://mcmap.net/q/891066/-reverse-list-in-ng-repeat – Saltine

Answer 1

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/

Quass

Answer 2

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

Overtly

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 – Prosper

Thanks! I was looking for a way to reverse the default order. '-' worked for me. – Physiology

Answer 3

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

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

Examine

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. – African

Answer 4

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!

Bitstock

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). – Chamness

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? – Improvise

Answer 5

Hope this will solve your problem

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

Casaleggio

Answer 6

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

Prosper

Answer 7

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> 

Pulpy