AngularJs orderby過濾器無法正確排序數據

Question

我使用來自控制器的ng-repeat在html中顯示了一組客戶。

在這里，我試圖使用orderby過濾器對數據進行排序。 但是問題是，數組初始化后，它會按升序正確排序。 但是，當我單擊“名稱”標題時，它會更改數據，但不會像預期的那樣降低數據。 這是一個正在運轉的矮人：

http://plnkr.co/4aAH08bzVUnws5RRx5RP

AngularJs：

app.controller('MainCtrl', function($scope) {

  $scope.sortIt = "name";
  $scope.reverse = false;

  $scope.customers = [
                            {
                                name:'AAA',
                                city: 'Dublin',
                                orderTotal: 9.9563,
                                joined: '1947-10-10'},
                            {
                                name:'CCC',
                                city:'London',
                                orderTotal: 24.999,
                                joined: '2011-08-12'},
                            {
                                name:'BBB',
                                city:'Kenya',
                                orderTotal: 140.4852,
                                joined: '1981-06-04'},
                            {
                                name:'DDD',
                                city:'Tokyo',
                                orderTotal: 77.3654,
                                joined: '2006-10-30'}
                        ]

  $scope.doSort = function(propName) {
    $scope.sortIt = propName;

    //changing the value to opposite if true then false, if false then true
    $scope.reverse = !$scope.reverse; 
  }

HTML：

<table class="table table-striped">
      <thead>
        <tr>
          <th ng-click="doSort(name)" class="btn-arrange">
            Name
          </th>
          <th>
            <span>City</span>
          </th>
          <th>Order Total</th>
          <th>Joined</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="c in customers | orderBy: sortIt: reverse">
          <td>{{c.name}}</td>
          <td>{{c.city}}</td>
          <td>{{c.orderTotal}}</td>
          <td>{{c.joined}}</td>
        </tr>
      </tbody>
    </table>

Answer 1

替換$scope.reverse = !scope.reverse; 其中$scope.reverse = !$scope.reverse;

您錯過$ scope之前的$ 。

更新：

將<th ng-click="doSort(name)" class="btn-arrange">替換為<th ng-click="doSort('name')" class="btn-arrange">

工作演示

Answer 2

我添加此答案以對所有帶有謂詞的標題值進行排序

 <th><a href="" ng-click="predicate = 'name'; reverse=!reverse">Name</a> </th> <th><a href="" ng-click="predicate = 'city'; reverse=!reverse">City</a> </th> <th><a href="" ng-click="predicate = 'orderTotal'; reverse=!reverse">Order Total</a></th> <th><a href="" ng-click="predicate = 'joined'; reverse=!reverse">Joined</a></th> <tr ng-repeat="c in customers | orderBy:predicate:reverse"> <td>{{c.name}}</td> <td>{{c.city}}</td> <td>{{c.orderTotal}}</td> <td>{{c.joined}}</td>