Question

我正在尝试使用angularjs在相同的按钮单击中显示升序和降序数据。我能够按升序显示数据。但是我将如何在相同的按钮单击下显示降序（作为jquery中的切换）。我会告诉你问题我的桌面标题上有按钮＆＃34; V＆＃34;在那个点击我按升序排序列。我们可以在相同的按钮点击

降序

当用户第一次点击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

如何在角度js中切换orderby

1 个答案: