以 asc/desc 顺序排列的订单表列

Question

我有一个简单的表格，当您单击一列时，它按升序/降序对列进行排序。但是，我希望每列“记住”它的先前状态，并在单击它时执行相反的操作。例如，如果我第一次单击列名name，它将按升序排序。然后假设我单击不同的列，并按该 asc 排序。然后我再次点击name。 name 应按降序排列。

但是，我使用的方法不存储 which 列，即使我这样做了，我也无法在代码的排序部分访问它。我在行而不是列上使用ng-repeat，所以我不确定如何继续。箭头正常工作，（除非您一次只能排序 1 个，所以应该只有 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.