web-dev-qa-db-fra.com

Le champ entier AngularJS orderby ne fonctionne pas correctement

J'ai juste pris la démo la plus simple de http://docs.angularjs.org/api/ng.filter:orderBy et je viens de changer la valeur de age pour avoir un nombre différent de chiffres. Il cesse de fonctionner comme prévu. Son ordre comme "chaîne" pas comme "valeur entière". Comment dois-je le changer pour qu'il soit classé par âge comme une valeur entière?

La démo de Plunkr est ici http://plnkr.co/edit/pzgiIYrki7jUZdVaTMt9?p=preview

Les codes sont:

function Ctrl($scope) {
  $scope.friends =
      [{name:'John', phone:'555-1212', age:'2352345'},
       {name:'Mary', phone:'555-9876', age:'4235243'},
       {name:'Mike', phone:'555-4321', age:'241'},
       {name:'Adam', phone:'555-5678', age:'34325'},
       {name:'Julie', phone:'555-8765', age:'1234'}]
  $scope.predicate = '-age';
}


<!doctype html>
<html ng-app="App">
  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
  <body>

<div ng-controller="Ctrl">
  <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
  <hr/>
  [ <a href="" ng-click="predicate=''">unsorted</a> ]
  <table class="friend">
    <tr>
      <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
          (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
      <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
      <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>


  </body>
</html>
javascriptangularjsangularjs-ng-repeat
10
cjmling

vous devez convertir age en type Number à transformer en orderBy pour fonctionner comme il se doit.

Ajoutez à votre contrôleur pour trier String age en float:

   angular.forEach($scope.friends, function (friend) {
    friend.age = parseFloat(friend.age);
   });

Ça devrait marcher,

Voir PLunker

18
Maxim Shoustin

Je sais que c'est un peu tard pour cette réponse, mais dans la dernière version de Angular, vous pouvez utiliser une fonction comme prédicat de orderBy ( https://docs.angularjs.org/api/ng/filter/orderBy ) . Dans ce cas, ajoutez au contrôleur une fonction comme celle-ci.

$scope.orderByFunction = function(friend){
    return parseInt(friend.age);
};

et changez le prédicat dans le filtre orderBy

ng-repeat="friend in friends | orderBy:orderByFunction:reverse"

Ça fera l'affaire!

11
Freddy RT

Il suffit de supprimer les guillemets dans la variable age car il s’agit d’un nombre entier et non d’une chaîne:

  $scope.friends =
      [{name:'John', phone:'555-1212', age:2352345},
       {name:'Mary', phone:'555-9876', age:4235243},
       {name:'Mike', phone:'555-4321', age:241},
       {name:'Adam', phone:'555-5678', age:34325},
       {name:'Julie', phone:'555-8765', age:1234}]
1
nandop

Changer votre prédicat comme suit fonctionnera également:

<th><a href="" ng-click="predicate = '1*age'; reverse=!reverse">Age</a></th>
0
gvermeer

AngularJs possède des fonctionnalités intégrées pour trier les valeurs.Mais avant de trier les valeurs float, nous devons convertir les valeurs en float à l'aide de la fonction javavscript parseFloat ().

http://hubpages.com/technology/How-to-sort-table-content-filter-table-data-and-add-pagination-using-Angular-JS

0
Liz Eipe C