停止AngularJS NG-渲染重复按字母顺序 [英] Stop AngularJS ng-repeat rendering in alphabetical order

查看:214
本文介绍了停止AngularJS NG-渲染重复按字母顺序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的角度应用程序我想在一个表中显示JSON数据。数据是这样的:

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

和我这样显示的:

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

在我的脑海里这应该通过每`(键,值)的对象对,为了显示它。然而,AngularJS按照字母顺序显示的值。

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.

下面是它复制这一问题的plunkr:<一href=\"http://plnkr.co/edit/V3Y2ZuwV1v9Pzsl0jGhA?p=$p$pview\">http://plnkr.co/edit/V3Y2ZuwV1v9Pzsl0jGhA?p=$p$pview

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

如何可以调整code,使其显示在自然秩序的对象实际上进来?

推荐答案

您可以实现像这样

工作演示

Working Demo

在范围界定等作为所示的方法

In the scope define a method like as shown

$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重复,没有排序?怎么样?

Original Article: ng-repeat with no sort? How?

这篇关于停止AngularJS NG-渲染重复按字母顺序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆