Question

我有一个简单的方法来对已实现的表列进行排序，但我无法找到一种方法来在单击和反向排序之间切换。有没有人对这个问题有任何解决方案？下面是一个小提示，向您展示我的意思。

curl -X POST -d 'my_json_data' 'my_url'

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

Answer 1

您可以通过在列名前加上＆＃39; - ＆＃39;来切换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作为orderBy过滤器的第3部分来反转排序：

<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

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

3 个答案: