如何有条件地更改angular中的orderBy参数？

Question

I have a table row with an orderBy parameter. How do I change it to another parameter based on the value returned by a method?

This is what my tr looks like -

<tr class="pl" ng-repeat="thing in things | orderBy:'oldId':reverse" ng-class="{'row-error': component.missing}">
          <td class="drag-handle" sortable-handle><i class="move"></i></td>
          <td class="some-checkbox delete">
            <div class="cb-wrapper">
                ...
            </div>
          </td>
          <td class="some-type">
            <i type-icon="component.type" component-url="component.url"/>
          </td>
        </tr>

Here, based on the value returned by an isFeatureAvailable() method, I would like the orderBy to be either

orderBy:'oldOrder':reverse"

or

orderBy:'newOrder'

How do I do that?

Answer 1

'oldOrder' and 'newOrder' can be on a scope variable which changes based on other logic.

e.g. $scope.sortCriteria = 'oldOrder';

and then somewhere else:

$scope.changeCriteriaToNew = function(){
    $scope.sortCriteria = 'newOrder';
}

and in html:

ng-repeat="thing in things | orderBy:sortCriteria:reverse"

SethGunnells's way is also another method of doing this.

Answer 2

Something like this should do the trick.

function order() {
  if (isFeatureAvailable() === 'something') return '-oldOrder';
  return 'newOrder';
}

Then just expose that function through your controller and use it in your directive like so:

ng-repeat="thing in things | orderBy: order()"

Here is a live example in JS Bin.