Как изменить сортировку столбца при нажатии с помощью AngularJS

Question

У меня есть простой способ сортировки столбца таблицы, но я не могу найти способ чередовать обратную сортировку по щелчку и обратно. Есть ли у кого-нибудь решения этой проблемы? Ниже приведена скрипка, показывающая, что я имею в виду.

<div ng-app="app"> 

<div ng-controller="controller"> 

    <p>{{orderProperty}}</p> 
    <div class="col-md-10"> 
     <table class="table table-hover table-bordered"> 
      <thead> 
      <tr> 
       <th>Status<a ng-click="orderProperty = 'a'">^</a></th> 
       <th>Ref<a ng-click="orderProperty = 'b'">^</a></th> 
       <th>Service<a ng-click="orderProperty = 'c'">^</a></th> 
       <th>Domain<a ng-click="orderProperty = 'd'">^</a></th> 
       <th>Service Owner<a ng-click="orderProperty  = 'e'">^</a></th> 
       <th>Stage<a ng-click="orderProperty = 'f'">^</a></th> 
      </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="x in projects | orderBy:orderProperty"> 
        <td><b>{{x.a}}</b></td> 
        <td>{{x.b}}</td> 
        <td>{{x.c}}</td> 
        <td>{{x.d}}</td> 
         <td>{{x.e}}</td> 
         <td>{{x.f}}</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/ben1729/3nxykbhk/

Answer 1

Вы можете переключать orderProperty предваряя имя столбца с '-'. Заменить заголовок таблицы с этим кодом:

<thead> 
    <tr> 
     <th>Status<a ng-click="setOrderProperty('a')">^</a></th> 
     <th>Ref<a ng-click="setOrderProperty('b')">^</a></th> 
     <th>Service<a ng-click="setOrderProperty('c')">^</a></th> 
     <th>Domain<a ng-click="setOrderProperty('d')">^</a></th> 
     <th>Service Owner<a ng-click="setOrderProperty('e')">^</a></th> 
     <th>Stage<a ng-click="setOrderProperty('f')">^</a></th> 
    </tr> 
</thead> 

... и добавить эту функцию в Вашей области:

$scope.setOrderProperty = function(propertyName) { 
    if ($scope.orderProperty === propertyName) { 
     $scope.orderProperty = '-' + propertyName; 
    } else if ($scope.orderProperty === '-' + propertyName) { 
     $scope.orderProperty = propertyName; 
    } else { 
     $scope.orderProperty = propertyName; 
    } 
} 

http://jsfiddle.net/3nxykbhk/1/

Answer 2

Вы можете полностью изменить порядок пропусканием true как 3-й части orderBy фильтра:

<tr ng-repeat="x in projects | orderBy : orderProperty : true"> 

Answer 3

В HTML

Изменение ng-click позвонить функция

<tr> 
    <th><a ng-click="sortProperty('a')">Status</a></th> 
    <th><a ng-click="sortProperty('b')">Ref</a></th> 
    <th><a ng-click="sortProperty('c')">Service</a></th> 
    <th><a ng-click="sortProperty('d')">Domain</a></th> 
    <th><a ng-click="sortProperty('e')">Service Owner</a></th> 
    <th><a ng-click="sortProperty('f')">Stage</a></th> 
</tr> 

В Javascript:

добавить '+' к orderProperty переменной

$scope.orderProperty = "+f";

затем добавить эту функцию

$scope.sortProperty = function(column) { 
    var currentColumn = $scope.orderProperty.slice(1); 
    var currentDirection = $scope.orderProperty.slice(0, 1); 
    var dir = '+'; 

    if (column === currentColumn) { 
     dir = currentDirection === '+' ? '-' : '+'; 
    } 
    $scope.orderProperty = dir + column; 
}; 

Щелчок на заголовке столбца теперь переключит сортировку

see JsFiddle demo