如何使用AngularJS將字母列排序添加到表格

Question

本質上，我需要在表格的標題中添加一個小按鈕或某些內容，以便按列按字母順序對數據進行排序。我在使用AngularJS時遇到了麻煩，需要一些幫助。

這是顯示錶和......片段

<div class="col-md-10"> 
    <table class="table table-hover table-bordered"> 
     <thead> 
     <tr> 
      <th>Status</th> 
      <th>Ref</th> 
      <th>Service</th> 
      <th>Domain</th> 
      <th>Service Owner</th> 
      <th>Stage</th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProp"> 
      <td><b>{{x.a}}</b></td> 
      <td>{{x.b}}</td> 
      <td><u>{{x.c}}</u></td> 
      <td>{{x.d}}</td> 
      <td>{{x.e}}</td> 
      <td>{{x.f}}</td> 
     </tr> 
     <tr collapse="isCollapsed" ng-repeat-end=""> 
     <td colspan="6"> 
      <h3>Test</h3> 
      <p>Test</p> 
     </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

這是代碼的plnkr http://plnkr.co/edit/OkRbR9geeOcCGy2K01jB?p=preview

Answer 1

給這個一個非常簡單的解決辦法試一試：

HTML：

<table> 
    <thead> 
    <tr> 
     <th>Status<a ng-click="orderProperty = 'a'">^</a></th> 
     <th>Ref<a ng-click="orderProperty = 'b'">^</a></th> 
     <th>Service<a ng-click="orderProperty = 'c'">^</a></th> 
     <th>Domain<a ng-click="orderProperty = 'd'">^</a></th> 
     <th>Service Owner<a ng-click="orderProperty = 'e'">^</a></th> 
     <th>Stage<a ng-click="orderProperty = 'f'">^</a></th> 
    </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="x in projects | orderBy:orderProperty"> 
      <td><b>{{x.a}}</b></td> 
      <td>{{x.b}}</td> 
      <td>{{x.c}}</td> 
      <td>{{x.d}}</td> 
      <td>{{x.e}}</td> 
      <td>{{x.f}}</td> 
     </tr> 
    </tbody> 
</table> 

JavaScript：

app.controller('controller', function($scope) { 
    $scope.orderProperty = "f"; // Sort by "f" by default 
    $scope.projects = [...]; 
}); 

工作的jsfiddle這裏：http://jsfiddle.net/ben1729/3nxykbhk/