AngularJs Custom orderBy with two parameters

Question

I am having trouble with the proper syntax for creating a custom orderBy filter. I have no problems if require one parameter ( the item being iterator over in ng-repeat ). How do you pass a second parameter. I have tried:

  <div ng-repeat="item in items | orderBy:myCustomSort:mySecondParameter"></div>

However if I put a break in the myCustomSort function, mySecondParameter is undefined. Additionally can you have orderBy reverse the order as well and if so where do you stick the "reverse" parameter.

Thanks.

Dipam Shrivastav · Accepted Answer · 2017-09-12 10:17:47Z

You can create your custom filter to filter by multiple keys

In your js file:-

App.filter('multiOrderBy', ["$filter", function ($filter) {
return function (items, key1, key2) {
    var newItems = [];
    if(!items || !items.length)
        return newItems;
    function sortKey1(obj) {
        return obj[key1].toLowerCase();
    }
    function sortKey2(obj) {
        return obj[key2].toLowerCase();
    }
    if(key1)
        newItems = $filter('orderBy')(items, sortKey1);
    if(key2)
        newItems = $filter('orderBy')(newItems, sortKey2);
    return newItems;
  }
}]);

In HTML:-

<div ng-repeat="item in items | multiOrderBy: 'name': 'category'"></div>

In my case items are:-

$scope.items = [
        {"name":"ABC", "category":"Project"},
        {"name":"xyz", "category":"Project"},
        {"name":"red", "category":"Color"},
        {"name":"Blue", "category":"Color"}
    ];

so after filtering the array will be:-

$scope.items = [
        {"name":"Blue", "category":"Color"},
        {"name":"red", "category":"Color"},
        {"name":"ABC", "category":"Project"},
        {"name":"xyz", "category":"Project"}
    ];

michael · Accepted Answer · 2014-01-22 20:33:11Z

1

Please have a look at: http://docs.angularjs.org/api/ng.filter:orderBy. The parameter for the orderBy filter could be a string, function or an array. So you may write:

<div ng-repeat="item in items | orderBy:[myCustomSort,mySecondParameter]"></div>

to sort your data by two properties.

As an example see this fiddle: http://jsfiddle.net/kFHXL/ if you click on the "Age" you can see that the data are sorted by name and after that by age.

answered Jan 22, 2014 at 20:33

michael

16.4k8 gold badges57 silver badges60 bronze badges

1 Comment

Eric G Over a year ago

Thanks but...Your example of a two field sort is NOT the same as a customSort function with parameters. As a matter of course, I always read the doc. This fiddle is a direct example of my question: jsfiddle.net/4pcbc. Additionally, your example pseudocode will not work...an array composed of a function and a parameter. Try it.

Eric G · Accepted Answer · 2014-01-22 23:10:27Z

0

I could not find a solution to pass an additional parameter into the sort function. Instead I just created an appendItemFilter which takes the argument I wanted to reference in the customSort and appends it to each item. Then I can just reference it directly in the item. so:

<div ng-repeat="item in items | appendItem:mySecondParameter | orderBy:myCustomSort"></div>

answered Jan 22, 2014 at 23:10

Eric G

93512 silver badges21 bronze badges

1 Comment

cre8value Over a year ago

Instead of adding an additional parameter to the ng-repeat, you could declare a variable on the controller's $scope for the 2nd param and bind it to some kind of input on the view: $scope.sortBy = someParamToSortBy; // ex: 'price', 'name', etc... Then your custom orderBy function can just access the $scope.sortBy without passing in a 2nd param. $scope.mySortFunction = function(item) { return(item[$scope.sortBy]); };

Collectives™ on Stack Overflow

AngularJs Custom orderBy with two parameters

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related