3

我想顯示數據的升序和降序在同一按鈕單擊使用angularjs。我能夠以升序顯示數據。但我將如何顯示降低相同的按鈕單擊(作爲一個在jQuery中切換)。我會告訴你問題我有我的表格標題「V」上的按鈕我按升序排列列我可以降序排列在同一個按鈕上點擊如何在角度js切換orderby

當用戶首次點擊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'; 
    }; 

回答

10

通知的排序依據過濾器的語法:

{{ orderBy_expression | orderBy : expression : reverse }} 

表達是排序的列,並相反可以是真或假。這裏是文檔進一步解釋這個:https://docs.angularjs.org/api/ng/filter/orderBy

因此改變你的NG-重複到

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

現在,在您setSort方法添加以下代碼來管理排序方向:

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

此外,在的頂部定義的默認排序方向控制器:

$scope.sortDir = false; 

我們將它初始化爲false,因爲false是常規排序,而tr你是反向排序的。 這裏是一個更新的plunker:http://plnkr.co/edit/fhcmwqWpv8mt23vV69vZ?p=preview