如何在角度js中切换orderby

Question

我试图使用angularjs在相同的按钮单击上显示升序和降序数据.我能够按升序显示数据.但是我将如何在相同的按钮单击下显示降序(作为jquery中的切换).我会告诉你问题我在表格标题"V"上有按钮我点击了按升序排序列.我们可以按相同的按钮点击降序

当用户第一次在colomn上点击时.. 预期的结果就是这个我能够实现这一点.

 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;

还要在控制器顶部定义默认排序方向:

$scope.sortDir = false;

我们将其初始化为false,因为false是常规排序,而true是反向排序.这是一个更新的plunker:http://plnkr.co/edit/fhcmwqWpv8mt23vV69vZ？p = preview