Search code examples
angularjsangularjs-ng-repeatangularjs-orderby

angular orderBy in ng-repeat not working


Cant find any existing questions that match my problem...

OrderBy isn't working for me; I've boiled down to the following example code:

controller:

'use strict';

angular.module('angularSampleApp')
.controller('MainCtrl', function($scope) {

    $scope.products = [{
        product_summary: {
            purchase_id: 225,
            purchase_date: '2014-09-05T08:58:59+10:00',
            title: 'Product 1',
        }
    }, {
        product_summary: {
            purchase_id: 226,
            purchase_date: '2014-09-05T11:34:28+10:00',
            title: 'Product 2',
        }
    }];

    $scope.purchaseDate = function(product) {
      return Date.parse(product.product_summary.purchase_date);
    }

});

and view:

<ul>
  <li ng-repeat="product in products | orderBy:purchaseDate">
  {{product.product_summary.title}} : {{product.product_summary.purchase_date}}
</ul>

<ul>
  <li ng-repeat="product in products | orderBy:purchaseDate:reverse">
  {{product.product_summary.title}} : {{product.product_summary.purchase_date}}
</ul>

Both lists are in the same order.

As far as I can see, I'm doing things properly - the purchaseDate function returns the Date.parse output which is an int, so as far as I can see, this should work...

Can anyone see what I'm doing wrong?


Solution

  • reverse (optional) boolean Reverse the order of the array.

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

    reverse is a variable, it needs to be set to either true or false. If you use an undefined variable, it is "falsy", so it behaves as if you hadn't told it to reverse. Add $scope.reverse = true and it will work.

    Edit: Actually, you probably need to do:

    orderBy:'productSummary.purchaseDate':reverse 
    

    as well to order it by purchaseDate