AngularJs orderby filtre ne pas trier les données correctement

Question

J'ai un tableau de client affiché en html en utilisant ng-repeat du contrôleur.

Ici, j'essaie de trier les données en utilisant un filtre de commande. Mais le problème est lorsque le tableau initialisé est trié correctement dans l'ordre croissant. Mais quand je clique sur l'en-tête de nom il chnages les données mais ne descend pas les données comme prévu. Voici un plunker de fonctionnement:

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

Remplacer $scope.reverse = !scope.reverse; avec $scope.reverse = !$scope.reverse;

Vous avez manqué $ avant scope.

Mise à jour:

Remplacer <th ng-click="doSort(name)" class="btn-arrange"> avec <th ng-click="doSort('name')" class="btn-arrange">

Working Demo

Answer 2

J'ajoute cette réponse à faire le tri pour toutes les valeurs de cap individuelles avec prédicat

<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>