wake-up-neo.com

AngularJS orderby integer field funktioniert nicht richtig

Ich habe gerade die einfachste Demo von http://docs.angularjs.org/api/ng.filter:orderBy genommen und nur den Wert des Alters geändert, um eine andere Anzahl von Ziffern zu haben. Es funktioniert nicht mehr wie erwartet. Die Reihenfolge ist wie bei "string" und nicht wie bei "integer". Wie soll ich es ändern, damit es nach Alter wie ein Integerwert sortiert wird?

Die Plunkr-Demo finden Sie hier http://plnkr.co/edit/pzgiIYrki7jUZdVaTMt9?p=preview

Codes sind:

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

sie müssen das Alter in den Typ Zahl umwandeln, damit orderBy wie gewünscht funktioniert.

Fügen Sie Ihrem Controller Folgendes hinzu, um das Alter der Zeichenfolge als float zu sortieren:

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

Es sollte funktionieren,

Sehen PLunker

18
Maxim Shoustin

Ich weiß, dass diese Antwort etwas spät ist, aber in der neuesten Version von Angular können Sie eine Funktion als Vergleichselement von orderBy verwenden ( https://docs.angularjs.org/api/ng/filter/orderBy ) . In diesem Fall fügen Sie dem Controller eine Funktion wie die folgende hinzu

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

und ändern Sie das Prädikat im orderBy-Filter

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

Das wird den Trick machen!

11
Freddy RT

Sie müssen nur Anführungszeichen in der Altersvariablen entfernen, da es sich um eine Ganzzahl und nicht um eine Zeichenfolge handelt:

  $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

Das Ändern Ihres Prädikats in Folgendes funktioniert auch:

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

In AngularJs sind Funktionen zum Sortieren der Werte integriert. Vor dem Sortieren von float-Werten müssen die Werte mit der Funktion parseFloat () javavscript in float konvertiert werden.

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

0
Liz Eipe C