如何使用 AngularJS 在单击时对列进行反向排序

Question

我有一个对 table 列进行排序的简单方法，但我想不出一种方法来交替进行点击和返回时的反向排序。有人对此问题有任何解决方案吗？下面是 fiddle 向您展示我的意思。

<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

您可以通过将 true 作为 orderBy 过滤器的第三部分传递来反转顺序：

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

Answer 2

在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;
};

点击列 header 现在将切换排序

see JsFiddle demo

Answer 3

您可以通过在列名前加上“-”作为前缀来切换 orderProperty。将您的 table header 替换为此代码：

<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/

如何使用 AngularJS 在单击时对列进行反向排序

How to reverse sort a column on click using AngularJS

sorting

angularjs

angularjs-ng-click