Question

我有一个简单的表，可以在单击列时按升序/降序对列进行排序。但是，我希望每一栏都能记得＆＃34;它是以前的状态，单击时则相反。例如，如果我第一次单击列名name，它将被排序为asc。然后假设我单击一个不同的列，它按asc排序。然后我再次点击name。 name应按降序排序。

但是，我使用的方法并不存储哪个列，即使我这样做，我也无法在代码的排序部分访问它。我在不在列上的行上使用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.

以asc / desc顺序排序表列

1 个答案: