angular ng-repeat in reverse

angular ng-repeat in reverse

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:

{{friend.name}} {{friend.phone}} {{friend.age}}

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

{{friend.name}} {{friend.phone}} {{friend.age}}

Solutions/Answers:

Solution 1:

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.

Solution 2:

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

Related:  How can I show all the localStorage saved variables?

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

or

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

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

Solution 3:

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.

Solution 4:

You can reverse by the $index parameter

<tr ng-repeat="friend in friends | orderBy:'$index':true">

Solution 5:

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

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

Solution 6:

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.

Related:  EmberJS actions - call one action from another when wrapped within `actions`