Zatrzymaj AngularJS ng-repeat rendering w kolejności alfabetycznej

Question

W mojej aplikacji kątowej próbuję wyświetlić dane JSON w tabeli. Dane wygląda następująco:

$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" 
    }; 

A ja wyświetlając go w ten sposób:

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

Moim zdaniem to powinno przejść przez każdy `(klucz, wartość) pary w obiekcie i wyświetlić go w celu. Jednak AngularJS wyświetla wartości w kolejności alfabetycznej.

Oto plunkr który powiela ten problem: http://plnkr.co/edit/V3Y2ZuwV1v9Pzsl0jGhA?p=preview

Jak mogę dostosować kod tak, że wyświetla w porządku naturalnym, że obiekt rzeczywiście pochodzi w?

Answer 1

można osiągnąć to jak to

Working Demo

w zakresie określenia sposobu podobnego jak pokazano:

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

i HTML, takich jak jak pokazano poniżej

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> 

oryginalnego artykułu: ng-repeat with no sort? How?

Answer 2

javascript obiekt nie ma pojęcia 'porządku naturalnego' swoich kluczy:

Definicja obiektu z ECMAScript trzecie wydanie (here):

4.3.3 Object obiekt jest członkiem typu Object. Jest to nieuporządkowana kolekcja właściwości z których każda zawiera pierwotnych wartości, przedmiotu lub funkcji [...]

Prawdopodobnie powinno się zmienić trochę swoją strukturę danych ...
Na przykład:

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

a następnie użyj klawisza numerycznego uporządkować swoje przedmioty ... właściwości

Answer 3

obiektu nie mają naturalny porządek.

Można osiągnąć to, czego szukasz z nieco innej obiektu:

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