How to reverse an array in angular js without creating a filter

Question

I am having an array in controller as follows

function FooController($scope) {
    $scope.items = ["a","b","c"];
}

I used ng-repeat to show the data in items,

<div ng-app>
    <div ng-controller="FooController">
        <ul ng-repeat="item in items">
            <li>{{item}}</li>
        </ul>
    </div>
</div>

I got the result as a,b,c order. I want to show it in reverse order. that means c,b,a without changing its order in the controller or without creating a filter. How to do that? Check this link

Carol Skelly · Accepted Answer · 2018-04-05 11:09:17Z

17

I faced the same problem, but with an array of objects. This quick solution worked for me, but using the filter is still the best practice.

<li data-ng-repeat="item in data.slice().reverse()">
      ...
</li>

http://bootply.com/SgVBZvZ708

edited Apr 5, 2018 at 11:09

answered Feb 9, 2015 at 22:33

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sports Over a year ago

reverse() is a native javascript function... why you consider this a "dirty solution"?

Brandon Aguilar Over a year ago

This looks cleaner.

Alexandre Nucera · Accepted Answer · 2013-12-16 13:20:18Z

7

In order to avoid the writting of a custom filter, I suggest you to use this syntax :

  <ul ng-repeat="item in items |  orderBy:'-toString()'">

The documentation assume you sort an array of Objects but in your case there are just plain strings.

answered Dec 16, 2013 at 13:20

Alexandre Nucera

2,2232 gold badges22 silver badges34 bronze badges

Comments

Matt Zeunert · Accepted Answer · 2013-12-16 13:10:21Z

2

Wrap the strings in objects and use orderBy or create a new filter:

angular.module("app",[])
.filter("reverse", function(){
    return function(items){
        return items.slice().reverse(); // Create a copy of the array and reverse the order of the items
    };
});

And use it like this:

 <ul ng-repeat="item in items|reverse">

Updated fiddle (I've also updated the ng-app directive so it's passed the "app" module.)

answered Dec 16, 2013 at 13:10

Matt Zeunert

16.6k7 gold badges56 silver badges83 bronze badges

1 Comment

Amir Savand Over a year ago

When I stored my items I used items.slice().reverse(); now it's reversed pretty good.

Collectives™ on Stack Overflow

How to reverse an array in angular js without creating a filter

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related