按表格中的所有列進行純粹角度排序

我想給出一個表格按所有列排序的能力，但有點麻煩。我從Web服務中提取一些數據以填充表格，但隨後想要按用戶需要進行排序。我有一個plunker here。我的密切嘗試。我想這樣的事情：按表格中的所有列進行純粹角度排序

$scope.order = function(predicate, reverse) { 
     $scope.recentalerts = orderBy($scope.recentalerts, predicate, reverse); 
    };

喜歡從角網站可能工作，但我有一點麻煩，將它集成到我自己的表中。我究竟做錯了什麼？還是有更簡單的方法來做到這一點？我想堅持像this example一樣的平角。

來源

2015-05-11 erp

Plunkr不工作，角似乎沒有找到，你能解決這個問題嗎？ – floribon

是的，對此感到遺憾。 1時刻 – erp

老實說，我不知道爲什麼它不是在拼命工作，我只是覺得這是一個訂單的錯誤。數據顯示在我的web應用程序 – erp

你的例子是工作（固定plunkR後），但你總是強迫reverse到false。

如果你想重現什麼角度做的，這是逆每次點擊的reverse參數，你可以爲實例增加服用點是這樣的：

$scope.orders[predicate] = !$scope.orders[predicate]; 
$scope.recentalerts = orderBy($scope.recentalerts, predicate, $scope.orders[predicate]);

見工作plunkr：

http://plnkr.co/edit/Z9LDlWvwWV82D65pfiF6?p=preview

或者以更簡單的形式使用共同的$scope.reverse屬性：

http://plnkr.co/edit/sMD7ZqmsJ7bULa26jo6q?p=preview

來源

2015-05-11 21:59:17 floribon

+1爲每列保留排序，總是激怒我我永遠也找不到一個好的方法來做到這一點，我想我嘗試這麼做時需要更多的咖啡，因爲這很簡單，很棒。 –

'$ scope.reverse'是殺手。感謝您指出了這一點。此外（爲什麼摔壞？）它正在我的web應用程序上工作。有時候，沉悶的人很時髦，爲什麼？ – erp

您在控制器的依賴項中忘記了'$ http'：'['$ scope'，'$ filter'，函數（$ scope，$ http，$ filter）'。總是打開你的開發者控制檯，檢查你開發時是否有任何錯誤，包括plunkr，這會爲你節省很多時間。 – floribon

這是我用於在表格中滾動我自己的排序的片段。只需使用一個字符串來確定我想要排序的屬性（反向支持）並動態更改它，然後在ng-repeat上使用orderBy。

希望這會有所幫助。

angular.module('app', []) 
 
    .controller('testCtrl', ['$scope', 
 
    function($scope) { 
 
     $scope.sortBy = 'ID'; 
 
     $scope.sort = function(sortBy) { 
 
     if ($scope.sortBy == sortBy) { 
 
      $scope.sortBy = '-' + sortBy 
 
     } else { 
 
      $scope.sortBy = sortBy; 
 
     } 
 
     } 
 

 
     $scope.people = [{ 
 
     'ID': 1, 
 
     'Name': 'Aaron', 
 
     'Age': 70 
 
     }, { 
 
     'ID': 28, 
 
     'Name': 'Ben', 
 
     'Age': 60 
 
     }, { 
 
     'ID': 2, 
 
     'Name': 'Claire', 
 
     'Age': 50 
 
     }, { 
 
     'ID': 14, 
 
     'Name': 'Damian', 
 
     'Age': 40 
 
     }, { 
 
     'ID': 8, 
 
     'Name': 'Frank', 
 
     'Age': 30 
 
     }]; 
 
    } 
 
    ]);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="testCtrl"> 
 
    <div id="wrapper"> 
 
     <div style="margin: 1em"> 
 
     <h4>Recent Alerts</h4> 
 
     <div> 
 
      <table class="table table-hover table-striped"> 
 
      <thead> 
 
       <tr> 
 
       <th ng-click="sort('ID')">ID 
 
        <i class="fa fa-caret-down" ng-show="sortBy=='-ID'"></i> 
 
        <i class="fa fa-caret-up" ng-show="sortBy=='ID'"></i> 
 
       </th> 
 
       <th ng-click="sort('Name')">Name 
 
        <i class="fa fa-caret-down" ng-show="sortBy=='-Name'"></i> 
 
        <i class="fa fa-caret-up" ng-show="sortBy=='Name'"></i> 
 
       </th> 
 
       <th ng-click="sort('Age')">Age 
 
        <i class="fa fa-caret-down" ng-show="sortBy=='-Age'"></i> 
 
        <i class="fa fa-caret-up" ng-show="sortBy=='Age'"></i> 
 
       </th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr data-ng-repeat="person in people | orderBy: sortBy"> 
 
       <td ng-bind="person.ID"></td> 
 
       <td ng-bind="person.Name"></td> 
 
       <td ng-bind="person.Age"></td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
     <!-- /.col-lg-12 --> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-05-11 21:56:38

按表格中的所有列進行純粹角度排序

回答

相關問題