Stop AngularJS ng-repeat rendering in alphabetical order

问题

In my angular app I'm trying to display JSON data in a table. The data looks like this:

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

And I'm displaying it like this:

   <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 my mind this should go through each `(key, value) pair in the object and display it in order. However, AngularJS displays the values in alphabetical order.

Here's a plunkr which replicates this issue: http://plnkr.co/edit/V3Y2ZuwV1v9Pzsl0jGhA?p=preview

How can I tweak the code so it displays in the natural order that the object actually comes in?

回答1:

You can achieve it like this

Working Demo

In the scope define a method like as shown

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

and in html like as shown below

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 Article: ng-repeat with no sort? How?

回答2:

A Javascript object does not have the concept of 'natural order' of its keys:

Definition of an Object from ECMAScript Third Edition (here):

4.3.3 Object An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function [...]

You probably should change a bit your data structure...
For example:

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

And then use the numerical key to sort your items...

回答3:

Object properties don't have a natural order.

You can achieve what you're looking for with a slightly different Object:

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

来源：https://stackoverflow.com/questions/24656912/stop-angularjs-ng-repeat-rendering-in-alphabetical-order

标签

javascript

angularjs

angularjs-ng-repeat