按字母顺序停止 AngularJS ng-repeat 渲染答案

【问题标题】：Stop AngularJS ng-repeat rendering in alphabetical order按字母顺序停止 AngularJS ng-repeat 渲染
【发布时间】：2015-03-22 05:12:32
【问题描述】：

在我的 Angular 应用程序中，我试图在表格中显示 JSON 数据。数据如下所示：

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

我是这样显示的：

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

在我看来，这应该遍历对象中的每个 `(key, value) 对并按顺序显示。但是，AngularJS 按字母顺序显示值。

这是一个复制此问题的 plunkr：http://plnkr.co/edit/V3Y2ZuwV1v9Pzsl0jGhA?p=preview

如何调整代码，使其以对象实际出现的自然顺序显示？

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

你可以这样实现

Working Demo

在作用域中定义一个如图所示的方法

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

在html中如下图所示

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>

原文：ng-repeat with no sort? How?

【讨论】：

太好了，这是我的首选解决方案，因为它让我可以保留传入对象的结构。

【解决方案2】：

Javascript 对象没有其键的“自然顺序”的概念：

ECMAScript 第三版中的对象定义 (here)：

4.3.3 对象对象是 Object 类型的成员。它是一个无序的属性集合每个都包含一个原始值、对象或函数 [...]

您可能应该稍微改变一下您的数据结构...
例如：

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

然后使用数字键对您的项目进行排序...

【讨论】：

你的对象可能比我的更干净 :)
找出问题才是真正重要的... :-)
格式正确的数据无可替代！在阅读完这篇文章并意识到我已经把它搞砸了之后，我重新调整了我的结构。

【解决方案3】：

对象属性没有自然顺序。

你可以用一个稍微不同的对象来实现你正在寻找的东西：

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

【讨论】：