Search code examples
javascriptangularjssortingangularjs-ng-repeat

Dynamic orderBy in AngularJS


I have an array of objects I want to order dynamically, based on a value from a drop down menu. This is what I have so far in my list:

ng-repeat="item in filteredItems = (items | filter:searchInput | orderBy:canBeAnything)"

But the problem however is that the sorting can be an attribute of the object or a calculated value using a function. It also should be able to sort in a descending way (optionally).

I know I can use a string for the canByAnything variable behind the orderBy passing an attribute of the object like:

“-creationDate” // descending ordering on creation date
“customer.lastname” // ascending ordering on customers last name

I also know I can orderBy a function like:

orderBy:myCalculatedValueFunction // will order in an ascending way based on a calculated value, for example calculating the total price of the object if it was an order or something

But what I don't know and want to achieve is:

  • How to combine it so I can use function(s) for sorting in combination with attributes/properties of the objects. I mean one or the other, dynamically, based on what the user has selected. Which can be an attribute or a calculated value, either descending or ascending.
  • How to sort a calculated value in a descending way

Solution

  • Update orderBy:myCalculatedValueFunction to something like orderBy:dynamicOrderFunction:

    ERRONEOUS

    $scope.dynamicOrderFunction = function() {
        if (orderByString) {
            return '-creationDate';
        }
        else {
            return myCalculatedValueFunction;
        }
    }
    

    orderBy also has a 3rd property that accepts a boolean and will reverse orderBy when true. (orderBy:dynamicOrderFunction:reverseOrder where $scope.reverseOrder = true; // or false)


    edit

    You will actually run into issues trying to switch orderBy between a string a function this way. Checkout out this jsfiddle for a working dynamic order function.

    $scope.dynamicOrder = function(user) {
        var order = 0;
        switch ($scope.order.field) {
            case 'gender':
                order = gender_order[user.gender];
                break;
            default:
                order = user[$scope.order.field];
        }
        return order;
    }