AngularJs sort Objekt in ngRepeat

Question

Ich benutze AngularJs und festgestellt, ein Problem beim Anordnen von Eigenschaften eines Hash-Objekts in einer Vorlage.
Mein Ziel ist es, wie:

function TestCtrl($scope){ 
    $scope.week = {'MONDAY': ['manuel'], 'TUESDAY': [], 'WEDNESDAY': ['valerio'], 'THURSDAY': ['manuel', 'valerio'], 'FRIDAY': []} 
} 

Jetzt, wenn ich versuche, diese Werte in meiner Vorlage zu drucken:

<div ng-repeat="(day, names) in week"> 
    <span>{{day}}</span> 
    <ul> <li ng-repeat="name in names">{{name}}</li> </ul> 
</div> 

Die Reihenfolge der gedruckten Tagen anders: FRIDAY MONDAY THURSDAY TUESDAY WEDNESDAY

Ich habe versucht, um den Filter anzuwenden orderBy, aber ich denke, es funktioniert nicht mit Objekten, sondern nur mit Arrays ...

Wie kann ich es bestellen?

Answer 1

Per AngularJS docs (Version 1.3.20):

Sie müssen sich bewusst sein, dass die JavaScript-Spezifikation nicht nicht definiert welcher Reihenfolge sie die Schlüssel für ein Objekt zurück. Um eine garantierte deterministische Reihenfolge für die Schlüssel, Winkelversionen bis zu und einschließlich 1.3 zu haben, sortieren Sie die Schlüssel alphabetisch.

Eine Abhilfe ist es, eine Anordnung von Tasten zu verwenden:

function TestCtrl($scope){ 
    $scope.week = { 
     'MONDAY': ['manuel'], 'TUESDAY': [], 
     'WEDNESDAY': ['valerio'], 'THURSDAY': ['manuel', 'valerio'],  
     'FRIDAY': []} 

    $scope.weekDays = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY"]; 
} 

das Array in Ansicht Verwendung für Iteration:

<div ng-repeat="day in weekDays"> 
    <span>{{day}}</span> 
    <ul> <li ng-repeat="name in week[day]">{{name}}</li> </ul> 
</div> 

---

Update von AngularJS Version 1.4.6 docs:

Version 1.4 hat die alphabetische Sortierung entfernt. Wir verlassen uns jetzt auf die Reihenfolge , die vom Browser zurückgegeben wird, wenn for key in myObj ausgeführt wird.

Answer 2

Es gibt keine Möglichkeit, solche Hash-Objekte anzuordnen. Nicht nur in eckigen, sondern generell in Javascript.

würde ich das Hash-Objekt in ein Array von Objekten, so etwas konvertieren:

$scope.week = [{day: 'MONDAY', names: ['manuel']}, {day: 'TUESDAY', names: []} ...]; 

Und dann den Blick auf etwas wie das ändern:

<div ng-repeat="day in week|orderBy:'day'"> 
    <span>{{day.day}}</span> 
    <ul> <li ng-repeat="name in day.names">{{name}}</li> </ul> 
</div> 

Answer 3

Diese Frage ist alt, aber Am Ende habe ich eine Antwort gefunden, von der ich dachte, dass sie eine Verbesserung bei einigen der vorherigen Antworten sein könnte.

Anstatt einfach das Objekt in ein Array zu konvertieren, ist es viel trockener, einen angularen Filter zu erstellen, der das für Sie erledigt, und dann ngRepeat oder ngOptions darüber.

Als Beispiel:

angular.module('myproject') 
    .filter('objOrder', function() { 
     return function(object) { 
      var array = []; 
      angular.forEach(object, function (value, key) { 
       array.push({key: key, value: value}); 
      }); 
      return array; 
     }; 
    }); 

Dann mit einem Objekt wie: Sie

<select 
    ng-model="myDegree" 
    required 
    ng-options="item.key as item.value for item in degrees | objOrder" 
    > 
</select> 

Auf diese Weise weder müssen:

$scope.degrees: { 
     ASC: "Associate's", 
     BAS: "Bachelor's", 
     MAS: "Master's", 
     MD: "M.D.", 
     JD: "J.D.", 
     PHD: "Ph.D", 
     OTH: "Other" 
    } 

Wir es wie so verwenden könnte Erstellen Sie ein neues Array und verschmutzen $scope, noch müssen Sie zurück und ändern Sie Ihre tatsächlichen degrees Objekt , die unerwünschte Nebenwirkungen haben könnten.

Answer 4

Dies wurde in Angular 1.4 behoben. Wie in der offiziellen Angular-Dokumentation unten angegeben:

Version 1.4 entfernt die alphabetische Sortierung. Wir verlassen uns jetzt in der Größenordnung durch den Browser zurückgegeben, wenn for key in myObj

https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 5

läuft Es ist eigentlich eine einfache Lösung ... Die Objektschlüssel werden standardmäßig nicht bestellt ABER, wenn Sie das schaffen Objekt im Browser von Grund auf Ihrem Browser WILL die Reihenfolge kennen;)

Beispiel:

// test-1 
var data = {}; 
data['a'] = 10; 
data['b'] = 5; 
data['c'] = 2; 

Object.keys(data); // ["a", "b", "c"] 


// test-2 
var data = {}; 
data['b'] = 5; 
data['a'] = 10; 
data['c'] = 2; 

Object.keys(data); // ["b", "a", "c"] 

So einfach ... erstellen Sie das Objekt ... oder benutzen Sie diese einfachen Filter:

.filter('orderObject', function() { 
    return function (object, reverse) { 
     var keys = Object.keys(object || {}).sort(); 
     if (reverse) keys.reverse(); 
     for (var ordered = {}, i = 0; keys[i]; i++) { 
      ordered[keys[i]] = object[keys[i]]; 
     } 
     return ordered; 
    } 
}) 

Beispiel mit regelmäßigen Objekte:

<!-- MARKUP : DEFAULT --> 
<table> 
    <tr ng-repeat="(key, value) in data"> 
     <td>{{key}}</td> 
     <td>{{value}}</td> 
    </tr> 
</table> 

<!-- RESULT : test-1 --> 
<table> 
    <tr> 
     <td>a</td> 
     <td>10</td> 
    </tr> 
    <tr> 
     <td>b</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>c</td> 
     <td>2</td> 
    </tr> 
</table> 

<!-- RESULT : test-2 --> 
<table> 
    <tr> 
     <td>b</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>10</td> 
    </tr> 
    <tr> 
     <td>c</td> 
     <td>2</td> 
    </tr> 
</table> 

Beispiel mit sortierten Objekte:

<!-- MARKUP : with FILTER orderObject:<reverse?> --> 
<table> 
    <tr ng-repeat="(key, value) in data | orderObject"> 
     <td>{{key}}</td> 
     <td>{{value}}</td> 
    </tr> 
</table> 

<!-- RESULT : test-1 without reverse --> 
<table> 
    <tr> 
     <td>a</td> 
     <td>10</td> 
    </tr> 
    <tr> 
     <td>b</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>c</td> 
     <td>2</td> 
    </tr> 
</table> 

<!-- RESULT : test-2 with reverse --> 
<table> 
    <tr> 
     <td>c</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>b</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>10</td> 
    </tr> 
</table>