javascript - 如何在angular js中切换orderby

Question

我正在尝试使用 angularjs 在同一按钮单击时按升序和降序显示数据。我能够按升序显示数据。但是我将如何在同一按钮单击时显示降序(作为 jquery 中的切换)。我会告诉你问题我的表标题“V”上有按钮点击我按升序对列进行排序。我们可以在同一个按钮上按降序点击

当用户第一次点击 colomn first ..Expected result is this I able to achieve this .

 Calls   Royal Dutch sell

    p        a royal data

    Xgtyu     test royal dat

但是如果他再次点击相同的按钮。那么它将显示这个预期结果

    Xgtyu     test royal dat

    p        a royal data

   Calls   Royal Dutch sell

我需要在单击同一按钮时将数据从升序切换为降序。

这是我的代码 http://plnkr.co/edit/cScyd91eHVGTTGN390ez

<div class="row" ng-repeat="column in displayData | orderBy: sortval | filter: query">
        <div class="col col-center brd" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
        <div class="col col-10 text-center brd">
        </div>
      </div>

JS代码

  $scope.setSort = function(idx){
    $scope.sortval = 'columns['+idx+'].value';
  };

Answer 1

注意 orderBy 过滤器的语法:

{{ orderBy_expression | orderBy : expression : reverse }}

Expression 是要排序的列，reverse 可以是 true 或 false。这是进一步解释这一点的文档:https://docs.angularjs.org/api/ng/filter/orderBy .

所以把你的 ng-repeat 改成

ng-repeat="column in displayData | orderBy:sortVal:sortDir"

现在在您的 setSort 方法中添加以下代码来管理排序方向:

 if ($scope.sortVal === 'columns['+idx+'].value')
    $scope.sortDir = !$scope.sortDir;

还在 Controller 顶部定义默认排序方向:

$scope.sortDir = false;

我们初始化为false，因为false是asc排序，true是desc排序。这是一个更新的 plunker:http://plnkr.co/edit/fhcmwqWpv8mt23vV69vZ?p=preview