Таблица столбцов заказа в порядке возрастания/убывания

Question

У меня есть простая таблица, сортирующая столбцы в порядке возрастания/убывания при нажатии столбца. Тем не менее, я хочу, чтобы каждый столбец «помнил» это предыдущее состояние и делает обратное при нажатии. Например, если я нажму на имя столбца name в первый раз, он будет отсортирован по возрастанию. Затем предположим, что я нажимаю на другой столбец и сортируется по этому знаку. Затем снова нажмите name. name следует сортировать по убыванию.

Однако метод, который я использую, не содержит , который столбец, и даже если бы я это сделал, я не смог бы получить к нему доступ в сортировочной части кода. Я использую ng-repeat в строке не по столбцам, поэтому я не уверен, как это сделать. Стрелки работают правильно (за исключением того, что вы должны сортировать только по одному за раз, поэтому только 1 должно быть видимым), но как мне получить доступ к имени столбца в разделе повтора строк? Есть идеи?

Вот JSFiddle:

Код:

 <script> 
    var app = angular.module('app', []); 
    app.controller('ctrl', ['$scope', 

    function($scope) { 
     $scope.data = tastyJSON; 

     $scope.columns = Object.keys($scope.data[0]); 

     $scope.order = {}; 

     $scope.sort = function(column){ 
      console.log(angular.toJson($scope.order)); 
     if ($scope.order[column] == column) { 
      $scope.order[column+'Desc'] = !$scope.order[column+'Desc']; 
     } else { 
      $scope.order[column] = column; 
      $scope.order[column+'Desc'] = false; 
     } 
     }; 

    }]); 
</script> 
<div ng-app="app" ng-controller="ctrl"> 
    <table> 
     <tr> 
      <th ng-repeat="column in columns" ng-click="sort(column)"> 
       <a href="">{{column}}</a> 
       <a ng-show="order[column] == column && order[column+'Desc']">v</a> 
       <a ng-show="order[column] == column && !order[column+'Desc']">^</a> 
      </th> 
     </tr> 
     <tr ng-repeat="row in data | orderBy:order[column]: order[column+'Desc']"> 
      <td ng-repeat="column in columns"> 
       {{row[column]}} 

      </td> 
     </tr> 

    </table> 
</div> 

Answer 1

Вы очень близко! Единственное, чего вам не хватает, это отслеживать текущий вид. Вот мои изменения:

$scope.sort = function(column){ 
    if ($scope.order[column] == column) { 
    $scope.order[column+'Desc'] = !$scope.order[column+'Desc']; 
    } else { 
    $scope.order[column] = column; 
    $scope.order[column+'Desc'] = false; 
    } 

    $scope.currentSort = {exp: $scope.order[column], reverse: $scope.order[column+'Desc']} ; 
}; 

Посмотреть код:

<a ng-show="currentSort.exp == column && currentSort.reverse">v</a> 
<a ng-show="currentSort.exp == column && !currentSort.reverse">^</a> 

...

<tr ng-repeat="row in data | orderBy:currentSort.exp: currentSort.reverse"> 

Updated Fiddle.