6

Using Angular JS's ngRepeat directive, how can I make it so that the resulting iterations go in the reverse order? I am using an object where the keys are numbers, and I'd like to sort by those, descending.

I know that you can't really sort an object by keys like this (without keeping a reference to an array), but is this at all possible with Angular?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>

<body>
  <script>
    var app = angular.module('myApp', []);
    app.filter('orderObjectBy', function() {
      return function(items, field, reverse) {
        var filtered = [];
        angular.forEach(items, function(item) {
          filtered.push(item);
        });
        filtered.sort(function(a, b) {
          return (a[field] > b[field] ? 1 : -1);
        });
        if (reverse) filtered.reverse();
        return filtered;
      };
    });
    app.controller('myController', ['$scope',
      function($scope) {
        $scope.data = {
          2013: 'oldest 4',
          2014: 'older 3',
          2015: 'new 2',
          2016: 'newest 1'
        };
      }
    ]);
  </script>
  <div id="myApp" ng-app='myApp' ng-controller="myController">
    <div ng-repeat="(date,text) in data">{{text}}</div>
    <hr/>
    <div ng-repeat="(date,text) in data | orderBy:date:reverse">{{text}}</div>
    <hr/>
    <div ng-repeat="(date,text) in data | orderBy:'-date'">{{text}}</div>
    <hr/>
    <div><b>Correct Answer!:</b></div><hr/>
    <div ng-repeat="(date,text) in data | orderObjectBy:date:true">{{text}}</div>
  </div>

</body>

For example, i'd like this to sort from Most recent to Oldest (the opposite of what it does in this code)

4
  • If you want to order by date in reverse order then just put '-' before the field name. So the code will be "(date,text) in data | orderBy:'-date'" Commented Apr 7, 2015 at 5:56
  • use filter.. I mean -ng-repeat='(date,text) in data s | orderBy:date:reverse' Commented Apr 7, 2015 at 5:58
  • Thanks guys, but I've tried that with the updated code in my question it doesn't seem to work. Commented Apr 7, 2015 at 6:00
  • @Anita you were right but that is only possible for the case of array and Ved yah reverse is a good option but it also only work for array. You guys can check the issue here github.com/angular/angular.js/issues/8458 Commented Apr 7, 2015 at 6:10

1 Answer 1

6

ng-repeat doen't work with object for it you need to create your custom filter.

 <div ng-repeat="(date,text) in data | orderObjectBy:date:true">{{text}}</div>

app.filter('orderObjectBy', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      return (a[field] > b[field] ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
});

Plunker

Hope it helps :)

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

1 Comment

Actually ng-repeat does work with object (i.e. can iterate its properties). It's orderBy that cannot sort anything but arrays.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.