I'm trying to display a list of values based on an order-function that may require paring more than 1 field, so the standard one-parameter function is not sufficient for me.

I want items with a description to be on the top of the list (no matter what the description is) and among the top half (with description) and the bottom half (without description) I want an alphabetical order by the name.

I have something like this:

<div ng-repeat="item in items | orderBy:memberSort">
  {{item.sortName}} / {{item.description}}
</div>

and the parator:

$scope.memberSort = function(m1, m2) {
    if (m1.description && !m2.description) {
       return -1;
    }
    if (m2.description && !m1.description) {
       return 1;
    }
    return m1.sortName.localCompare(m2.sortName);
};

how can I use a parator like this and not just a one-parameter value function? In above code, the parameter m2 is always undefined.

here is a jsfiddle: /

while this is just 1 current problem, the general question is how to define a parator function accepting 2 values and not just a single-parameter function that maps a plex object to a value?

I'm trying to display a list of values based on an order-function that may require paring more than 1 field, so the standard one-parameter function is not sufficient for me.

I want items with a description to be on the top of the list (no matter what the description is) and among the top half (with description) and the bottom half (without description) I want an alphabetical order by the name.

I have something like this:

<div ng-repeat="item in items | orderBy:memberSort">
  {{item.sortName}} / {{item.description}}
</div>

and the parator:

$scope.memberSort = function(m1, m2) {
    if (m1.description && !m2.description) {
       return -1;
    }
    if (m2.description && !m1.description) {
       return 1;
    }
    return m1.sortName.localCompare(m2.sortName);
};

how can I use a parator like this and not just a one-parameter value function? In above code, the parameter m2 is always undefined.

here is a jsfiddle: https://jsfiddle/1Lwg4s2r/15/

while this is just 1 current problem, the general question is how to define a parator function accepting 2 values and not just a single-parameter function that maps a plex object to a value?

• javascript
• angularjs

Share Improve this question Follow edited Mar 13, 2018 at 1:51 The.Bear 5,85522 gold badges3131 silver badges3434 bronze badges asked Mar 12, 2018 at 22:50 EasterBunnyBugSmasherEasterBunnyBugSmasher 1,49022 gold badges1717 silver badges3838 bronze badges 1

• if it is so, then I have no idea how to apply that solution to my problem. – EasterBunnyBugSmasher Commented Mar 12, 2018 at 23:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You had to specify memberSort parator as a third argument of orderBy:

angular.module('app', []).controller('myController', function($scope) {
  $scope.items = [    
    { description: '', sortName: 'Bob' },
    { description: '', sortName: 'Steve' },
    { description: '', sortName: 'Mark' },
    { description: 'Member', sortName: 'Kirk' },
    { description: 'Boss', sortName: 'Joe' }
  ];
  $scope.memberSort = function(o1, o2) {
    var m1 = o1.value, m2 = o2.value;
    if (m1.description && !m2.description)
       return -1;    
    if (m2.description && !m1.description)
       return 1;    
    return m1.sortName.localeCompare(m2.sortName);
  };
});

<script src="//code.angularjs/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller="myController">
  <div ng-repeat="item in items | orderBy: 'valueOf()' : false : memberSort">  
    {{item.sortName}} / {{item.description}}
  </div>
</div>

Since angularjs 1.5.7, the Angularjs OrderBy pipe can take a function as parator, but I think that is much simpler bind a function that return the sorted array using JavaScript array.sort().

JSFIDDLE

HTML

<div ng-repeat="item in getSortedItems()">
  {{item.sortName}} / {{item.description}}
</div>

JS

function myCtrl($scope) {
   $scope.items = [
      {description: 'Boss',sortName: 'Joe'},
      //... rest of your items
   ];

   $scope.getSortedItems = function() {
       return $scope.items.sort(function(m1, m2) {
           if (m1.description && !m2.description)
               return -1;

           if (m2.description && !m1.description)
               return 1;

           return m1.sortName.localeCompare(m2.sortName);
       });
   };
}

---

If case if you care about performance, do not use angularjs filters to do simple tasks like sort an array. While in my solution, the sort function is executed twice (would be better if you can sort the array an then assign the value to a binded variable), in the accepted solution is executed 20 times.