it-swarm.com.de

WinkelreihenfolgeNach der Sortierung als Text in ng-repeat

Ich habe diese Daten:

[{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
{"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
{"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]

Wenn ich nach einer ID oder nach Alter in einer Wiederholungsreihenfolge bestelle, wird die Nummer als Text sortiert. Da ich nicht finden kann, dass dies ein Problem ist, nehme ich an, dass es ein Problem mit meinem Code gibt. Ich habe diese Geige erstellt: http://jsfiddle.net/vsbGH/1/ Sorry über die Vorlage, aber jsfiddle lässt das HTML-Feld nicht zu. Jedenfalls ist dies der Code, der die Daten lädt und sortiert:

//user data
app.service('People', function() {
var People = {};
People.details = [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
                  {"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
                  {"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]
return People;
});

//list ctrl
controllers.listCtrl = function ($scope,People) {
 $scope.people = People.details;

 $scope.sortList = function(sortname) {
    $scope.sorter = sortname;
 }
}

Und dies ist der ng-repeat Teil der Vorlage:

<tr ng-repeat="person in people | orderBy:sorter ">
        <td>{{person.id | number}}</td>
        <td>{{person.firstname}} </td>
        <td>{{person.lastname}} </td>
        <td>{{person.age | number}}</td>
        <td>{{person.cars}} </td>
 </tr>

Vielen Dank, wenn Sie mir helfen können zu verstehen, warum die Zahlendaten nicht als Zahlen sortiert werden und warum sie als Text sortiert werden.

32
dewd

Ich denke, dass die beste Lösung darin besteht, die Zahlen, die ich auf meinen JSON-Objekten habe, korrekt zu formatieren, dh sie nicht in Anführungszeichen zu packen. So:

 [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
  {"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
  {"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]

wird:

[{"id":42,"firstname":"Sarah","lastname":"Dilby","age":40,"cars":"Yaris"},
 {"firstname":"Jason","lastname":"Diry","age":5,"id":5},
 {"id":6,"firstname":"Bilson","lastname":"Berby","age":1,"cars":"Tipo"}]

Ich vermute, die Lösung von SergL ist gut, wenn das Format der JSON-Daten nicht korrigiert werden kann.

Hinzu kommt, dass in meinem speziellen Fall das Problem mit der json_encode-Funktion von PHP auf der Serverseite zu tun hat. Standardmäßig werden Zahlen als Zeichenfolgen behandelt. Um das Problem zu beheben, musste ich die encode-Methode im Skript PHP mit der Option JSON_NUMERIC_CHECK versehen:

json_encode($assoc_array,JSON_NUMERIC_CHECK);
50
dewd

Sie müssen Ihren JSON nicht ändern. Sie können eine Funktion an den orderBy-Filter wie folgt übergeben:

$scope.sorterFunc = function(person){
    return parseInt(person.id);
};

<tr ng-repeat="person in people | orderBy:sorterFunc ">
        <td>{{person.id | number}}</td>
        <td>{{person.firstname}} </td>
        <td>{{person.lastname}} </td>
        <td>{{person.age | number}}</td>
        <td>{{person.cars}} </td>
 </tr>
28
Ragnar

In Ihrer ng-repeat-Anweisung verwenden Sie einen Zahlenfilter

<td>{{person.id | number}}</td>

Filter werden zum Formatieren der Ausgabe verwendet, aber die Modelleigenschaften werden nicht aktualisiert. Zum Beispiel: person.id = 1234.56789 wird als 1.234.568 gerendert.

Wie oben erwähnt, müssen Sie das Alter in die Typnummer umwandeln. Dann funktioniert orderBy so, wie es sollte . Zum Beispiel in Ihrem Service:

angular.forEach(People.details, function (detail) {
  detail.age = parseFloat(detail.age);
});
15
SergeL

Wenn Ihr orderBy-Wert keine Variable ist, die auf eine andere Zeichenfolge zeigt , sondern das Attribut, nach dem Sie sortieren möchten, müssen Sie es in Anführungszeichen setzen.

person in people | orderBy:'-id'

Wenn Sie Ihr Int oder Float analysiert haben und immer noch nicht korrekt sortiert werden, liegt dies möglicherweise daran. <:/(das ist meine Dummkopfmütze)

5
Ktel

Ich hatte das gleiche Problem, als ich mit einem Textfeld und ngModel arbeitete, um den Wert des von mir bestellten Modells zu ändern. Weil der Wert als String betrachtet wurde.

Mit dem neuen HTML5 <input type="number" /> analysiert Angular den Wert des Eingabefelds in eine Zahl (Float, denke ich), was mir dabei geholfen hat, die richtige Reihenfolge zu erhalten.

3
naitsirch

Lassen Sie orderBy auf eine Methode verweisen, deren Eigner der Gültigkeitsbereich oder seine nicht isolierten Vorfahren sind, und lassen Sie diese Methode eine aus dem String .. _ gewählte Zahl zurückgeben. Sie müssen möglicherweise eine Direktive schreiben, die den von den ngRepeat-Instanzen erstellten person-Bereich erbt diese Methode.

In Ihrem Fall ist das Alter außerdem eine Zeichenfolge, bei der es eine ganze Zahl hätte sein können, und daher würde die numerische Sortierung nativ angewendet werden.

Wenn Sie die Datenserverseite nicht ändern können, ändern Sie sie während des Abrufs auf der Clientseite.

0
lib3d