228

How can i get a reversed array in angular? i'm trying to use orderBy filter, but it needs a predicate(e.g. 'name') to sort:

<tr ng-repeat="friend in friends | orderBy:'name':true">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
<tr>

Is there a way to reverse original array, without sorting. like that:

<tr ng-repeat="friend in friends | orderBy:'':true">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
<tr>
Jay
  • 16,941
  • 11
  • 49
  • 71
Delremm
  • 3,031
  • 4
  • 16
  • 13

17 Answers17

332

I would suggest using a custom filter such as this:

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

Which can then be used like:

<div ng-repeat="friend in friends | reverse">{{friend.name}}</div>

See it working here: Plunker Demonstration


This filter can be customized to fit your needs as seen fit. I have provided other examples in the demonstration. Some options include checking that the variable is an array before performing the reverse, or making it more lenient to allow the reversal of more things such as strings.

Jay
  • 16,941
  • 11
  • 49
  • 71
205

This is what i used:

<alert ng-repeat="alert in alerts.slice().reverse()" type="alert.type" close="alerts.splice(index, 1)">{{$index + 1}}: {{alert.msg}}</alert>

Update:

My answer was OK for old version of Angular. Now, you should be using

ng-repeat="friend in friends | orderBy:'-'"

or

ng-repeat="friend in friends | orderBy:'+':true"

from https://stackoverflow.com/a/26635708/1782470

Community
  • 1
  • 1
amit bakle
  • 3,163
  • 1
  • 13
  • 14
125

Sorry for bringing this up after a year, but there is an new, easier solution, which works for Angular v1.3.0-rc.5 and later.

It is mentioned in the docs: "If no property is provided, (e.g. '+') then the array element itself is used to compare where sorting". So, the solution will be:

ng-repeat="friend in friends | orderBy:'-'" or

ng-repeat="friend in friends | orderBy:'+':true"

This solution seems to be better because it does not modify an array and does not require additional computational resources (at least in our code). I've read all existing answers and still prefer this one to them.

Dmitry Gonchar
  • 1,647
  • 2
  • 16
  • 26
  • 1
    Thanks for the tip! As a heads up for anyone else reading this, looks like this doesn't work in rc4 (`v1.3.0-rc.4`). If anyone gets a chance to try it in the new release, let us know! – mikermcneil Nov 30 '14 at 18:08
  • 1
    @mikermcneil Thanks for the comment! According to the same documentation it should work starting from the `v1.3.0-rc.5` ([rc.5 docs](https://code.angularjs.org/1.3.0-rc.5/docs/api/ng/filter/orderBy) vs [rc.4 docs](https://code.angularjs.org/1.3.0-rc.4/docs/api/ng/filter/orderBy)). I have updated the answer – Dmitry Gonchar Dec 02 '14 at 12:13
  • I have used `1.3.4` version personally - it worked perfectly there. – Dmitry Gonchar Dec 02 '14 at 12:19
  • 1
    Not working for me (v1.3.5). Tried `orderBy:'+':true`, `orderBy:'-':true`, `orderBy:'-':false`, `orderBy:'+':false` :( – Cody Jan 02 '15 at 20:19
  • 2
    @Cody Sorry for the late answer. Here you go - a working example with angular v1.3.5 https://jsfiddle.net/dmitry_gonchar/L98foxhm/1/. Probably the problem was in another place. – Dmitry Gonchar Apr 16 '15 at 18:55
  • Dmitry, thx for the Fiddle -- I'll have to investigate further why my code was having issues. Thx for all your input! – Cody Apr 17 '15 at 13:53
  • Dmitry, something is still wrong in your jsfiddle. Now, when I use `orderBy:'+':false` or even `| orderBy:'+'`, I still got a reverse order. – alevkon May 26 '15 at 18:06
  • 1
    @alevkon True. But it works if you specify the field ('+id', '-id' f.e.). Maybe this is a bug in Angular, that it does not work with normal order if you do not specify a field? I took this method from the docs (link is in the answer), so I was surprised as well as you. Anyway, the question was how to **reverse** an array. – Dmitry Gonchar May 28 '15 at 09:00
  • The fiddle doesn't work anymore, also doesnt work in 1.4.0 – David Jun 30 '15 at 16:54
57

Simple solution:- (no need to make any methods)

ng-repeat = "friend in friends | orderBy: reverse:true"
Cattla
  • 3,570
  • 1
  • 13
  • 29
Muhammad Hassam
  • 613
  • 5
  • 12
54

You can reverse by the $index parameter

<tr ng-repeat="friend in friends | orderBy:'$index':true">
jjhrms
  • 573
  • 4
  • 2
  • 13
    Should work, but doesn't (tried with and without quotes around `$index`). I'm on Angular 1.1.5. – Engineer Oct 29 '13 at 13:46
  • 2
    Worked for me (were using a property for sorting instead of $index though) http://stackoverflow.com/questions/16261348/descending-order-by-date-filter-in-angularjs#answer-16261373 – Certs Feb 06 '14 at 10:10
  • 4
    Does not work with AngularJS 1.2.13. I modified my array of objects to add an id to each object. The id being the index of the object inside the array. Then `ng-repeat="friend in friends | orderBy:'id':true"` works. – tanguy_k Feb 19 '14 at 12:47
17

You can just call a method on your scope to reverse it for you, like this:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {
        $scope.items = [1, 2, 3, 4];
        $scope.reverse = function(array) {
            var copy = [].concat(array);
            return copy.reverse();
        }
    });
    </script>
</head>
<body ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <ul>
        <li ng-repeat="item in reverse(items)">{{item}}</li>
    </ul>
</body>
</html>

Note that the $scope.reverse creates a copy of the array since Array.prototype.reverse modifies the original array.

Anders Ekdahl
  • 21,370
  • 4
  • 67
  • 57
13

if you are using 1.3.x, you can use the following

{{ orderBy_expression | orderBy : expression : reverse}}

Example List books by published date in descending order

<div ng-repeat="book in books|orderBy:'publishedDate':true">

source:https://docs.angularjs.org/api/ng/filter/orderBy

Kumar
  • 409
  • 5
  • 7
11

If you are using angularjs version 1.4.4 and above,an easy way to sort is using the "$index".

 <ul>
  <li ng-repeat="friend in friends|orderBy:$index:true">{{friend.name}}</li>
</ul>

view demo

vishnu
  • 519
  • 7
  • 11
1

When using MVC in .NET with Angular you can always use OrderByDecending() when doing your db query like this:

var reversedList = dbContext.GetAll().OrderByDecending(x => x.Id).ToList();

Then on the Angular side, it will already be reversed in some browsers (IE). When supporting Chrome and FF, you would then need to add orderBy:

<tr ng-repeat="item in items | orderBy:'-Id'">

In this example, you'd be sorting in descending order on the .Id property. If you're using paging, this gets more complicated because only the first page would be sorted. You'd need to handle this via a .js filter file for your controller, or in some other way.

whyoz
  • 4,892
  • 41
  • 52
0

You can also use .reverse(). It's a native array function

<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>

Pian0_M4n
  • 2,218
  • 26
  • 32
  • Your down-vote can only mean one thing: you have more incoming data. If the {} or [] keeps receiving data, it'll reverse each time, obviously. It's a new digest – Pian0_M4n Nov 17 '15 at 15:02
  • Warning for whoever wants to use this: `reverse` reverses the array in place, it does not just return a reversed copy. This means that every time this is evaluated, the array will be reversed. – jcaron Dec 05 '16 at 16:30
0

That's because you are using JSON Object. When you face such problems then change your JSON Object to JSON Array Object.

For Example,

{"India":"IN","America":"US","United Kingdon":"UK"} json object
[{"country":"India","countryId":"IN"},{"country":"America","countryId":"US"},{"country":"United Kingdon","countryId":"UK"}] 
user2004685
  • 8,721
  • 4
  • 29
  • 49
0

The orderBy filter performs a stable sorting as of Angular 1.4.5. (See the GitHub pull request https://github.com/angular/angular.js/pull/12408.)

So it is sufficient to use a constant predicate and reverse set to true:

<div ng-repeat="friend in friends | orderBy:0:true">{{friend.name}}</div>
user1012976
  • 146
  • 1
  • 3
0

I found something like this, but instead of array i use objects.

Here is my solution for objects:

Add custom filter:

app.filter('orderObjectBy', function() {
    return function(items, field, reverse){

        var strRef = function (object, reference) {
            function arr_deref(o, ref, i) {
                return !ref ? o : (o[ref.slice(0, i ? -1 : ref.length)]);
            }
            function dot_deref(o, ref) {
                return !ref ? o : ref.split('[').reduce(arr_deref, o);
            }
            return reference.split('.').reduce(dot_deref, object);
        };

        var filtered = [];

        angular.forEach(items, function(item) {
           filtered.push(item);
        });
        filtered.sort(function (a, b) {
           return (strRef(a, field) > strRef(a, field) ? 1 : -1);
        });
        if(reverse) filtered.reverse();
        return filtered;
    };
});

Which can then be used like

<div ng-repeat="(key, value) in items | orderObjectBy:'field.any.deep':true">

If you need old browser support, you will need to define the reduce function (this is only available in ECMA-262 mozilla.org)

// Production steps of ECMA-262, Edition 5, 15.4.4.21
// Reference: http://es5.github.io/#x15.4.4.21
if (!Array.prototype.reduce) {
Array.prototype.reduce = function(callback /*, initialValue*/) {
'use strict';
  if (this == null) {
    throw new TypeError('Array.prototype.reduce called on null or undefined');
  }
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  var t = Object(this), len = t.length >>> 0, k = 0, value;
  if (arguments.length == 2) {
    value = arguments[1];
  } else {
    while (k < len && !(k in t)) {
      k++; 
    }
    if (k >= len) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    value = t[k++];
  }
  for (; k < len; k++) {
    if (k in t) {
      value = callback(value, t[k], k, t);
    }
  }
  return value;
};
}
Twois
  • 468
  • 5
  • 16
0

I had gotten frustrated with this problem myself and so I modified the filter that was created by @Trevor Senior as I was running into an issue with my console saying that it could not use the reverse method. I also, wanted to keep the integrity of the object because this is what Angular is originally using in a ng-repeat directive. In this case I used the input of stupid (key) because the console will get upset saying there are duplicates and in my case I needed to track by $index.

Filter:

angular.module('main').filter('reverse', function() {
    return function(stupid, items) {
    var itemss = items.files;
    itemss = itemss.reverse();  
    return items.files = itemss; 
  };
});

HTML: <div ng-repeat="items in items track by $index | reverse: items">

Coded Container
  • 743
  • 2
  • 10
  • 30
0

Im adding one answer that no one mentioned. I would try to make the server do it if you have one. Clientside filtering can be dangerous if the server returns a lot of records. Because you might be forced to add paging. If you have paging from the server then the client filter on order, would be in the current page. Which would confuse the end user. So if you have a server, then send the orderby with the call and let the server return it.

Jens Alenius
  • 1,761
  • 1
  • 14
  • 19
0

Useful tip:

You can reverse you're array with vanilla Js: yourarray .reverse()

Caution: reverse is destructive, so it will change youre array, not only the variable.

Ke Vin
  • 77
  • 9
-2

I would sugest using array native reverse method is always better choice over creating filter or using $index.

<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>

Plnkr_demo.

Anders
  • 7,431
  • 6
  • 42
  • 76