Stop AngularJS ng-Repeat-Rendering in alphabetischer Reihenfolge

Question

In meiner eckigen App versuche ich JSON-Daten in einer Tabelle anzuzeigen. Die Daten sieht wie folgt aus:

$scope.data = 
    { 
    "EVENT NAME":"Free Event", 
    "ORDER ID":311575707, 
    "DATE":"6/26/14", 
    "GROSS REVENUE (USD)":"0", 
    "TICKET REVENUE (USD)":"0", 
    "EVENTBRITE FEES (USD)":"0", 
    "CC PROCESSING (USD)":"0", 
    "TICKETS":1, 
    "TYPE":"Free Order", 
    "STATUS":"Free Order", 
    "TRANSACTION ID":"", 
    "NOTES":"", 
    "FIRST NAME":"Khee Seng", 
    "LAST NAME":"Chua", 
    "EMAIL ADDRESS":"email@anemailadderss.com" 
    }; 

Und ich bin es so angezeigt wird:

<table class="table table-striped selector"> 
     <tbody> 
     <tr> 
      <td ng-repeat="(key, value) in data"> 
      <strong>{{key}}</strong> 
      </td> 
     </tr> 
     <tr> 
      <td ng-repeat="(key, value) in data"> 
        {{value}} 
       </td> 
     </tr> 
     </tbody> 
    </table> 

In meinem Kopf sollte jeder `durchlaufen (Schlüssel, Wert) -Paar in dem Objekt und anzeigen in Ordnung. AngularJS zeigt die Werte jedoch in alphabetischer Reihenfolge an.

Hier ist ein plunkr, die dieses Problem repliziert: http://plnkr.co/edit/V3Y2ZuwV1v9Pzsl0jGhA?p=preview

Wie kann ich den Code optimieren, so dass es in der natürlichen Ordnung zeigt, dass das Objekt in tatsächlich kommt?

Answer 1

Sie können es wie folgt

Working Demo

Im Rahmen erreichen definieren eine Methode, wie wie gezeigt

$scope.notSorted = function(obj){ 
    if (!obj) { 
     return []; 
    } 
    return Object.keys(obj); 
} 

und in html wie wie unten

html

<table class="table table-striped selector"> 
    <tbody> 
    <tr> 
     <th ng-repeat="key in notSorted(data)"> 
     {{key}} 
     </th> 
    </tr> 
    <tr> 
     <td ng-repeat="key in notSorted(data)" ng-init="value = data[key]"> 
      {{value}} 
     </td> 
    </tr> 
    </tbody> 
</table> 

Original-Artikel gezeigt: ng-repeat with no sort? How?

Answer 2

ein JavaScript-Objekt nicht über den Begriff der 'natürlichen Ordnung' seiner Schlüssel:

Definition eines Objekts von ECMAScript Third Edition (here):

4.3.3 Objekt Ein Objekt ist ein Mitglied des Typs Objekt. Es ist eine ungeordnete Sammlung von Eigenschaften von denen jede einen Grundwert enthält, ein Objekt oder Funktion [...]

Sie sollten wahrscheinlich ein wenig Ihre Datenstruktur ändern ...
Zum Beispiel:

$scope.data = 
{ 
    1: { "EVENT NAME": "Free Event" }, 
    2: { "ORDER ID": 311575707 }, 
    /* ... */ 
}; 

Und dann verwenden Sie die numerische Taste, um Ihre Produkte zu sortieren ...

Answer 3

Objekteigenschaften haben keine natürliche Ordnung.

können Sie erreichen, was Sie suchen mit einem etwas anderen Objekt:

$scope.data = 
    { 
    columns: [ 
     { 
     "EVENT NAME":"Free Event", 
     "priority": 0   
     }, 
     { 
     "ORDER_ID":311575707, 
     "priority": 1   
     }, 
     ... 
    ] 
    }