如何使用AngularJS在点击时对列进行反向排序 [英] How to reverse sort a column on click using AngularJS

问题描述

我有一个简单的对表列进行排序的方法，但我想不出一种方法来在单击和返回的反向排序之间进行切换.有人对此问题有解决方案吗?以下是一个小提琴，向您展示了我的意思.

I have a simple method of sorting the table column implemented but I can't figure out a way to alternate between reverse the sorting on click and back. Does anyone have any solutions to this issue? Below is a fiddle showing you what I mean.

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

推荐答案

您可以通过在列名前添加'-'来切换orderProperty. 用以下代码替换表头:

You could toggle the orderProperty by prefixing the column name with '-'. Replace your table header with this code:

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

...并将此功能添加到您的范围:

... and add this function to your scope:

$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在点击时对列进行反向排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！