如何删除 ng-repeat 的默认顺序

Question

如何停止 ng-repeat 中动态 table 数据的默认排序？目前我得到以下订单：

Addr | CustomerId | Name

但我想要的是以下顺序：

CustomerId | Name | Addr

如有任何帮助，我将不胜感激。

JS:

app.controller('MyController', function ($scope) {
  $scope.Customers = [
    { CustomerId: 1, Name: "John Hammond", Addr:'India'
    },
    {
      CustomerId: 2, Name: "Mudassar Khan", Addr:'India'
    },
    {
      CustomerId: 3, Name: "Suzanne Mathews",  Addr:'India'
    },
    {
      CustomerId: 4, Name: "Robert Schidner",  Addr: 'India'
    }
  ];

});

HTML:

<table>
  <tr >
    <th ng-repeat="(key,value) in Customers[0]">{{key}}</th>
  </tr>
  <tbody ng-repeat="c in Customers">
    <tr>
    </tr>
  </tbody>
</table>

Answer 1

所以objects在JS中天生就是无序的。您可以做的只是对 header 中的键进行硬编码，如果该键对于特定 table 是固定的，然后按相应的顺序打印值。

像这样：

<table>
  <tr >
    <th>CustomerId</th>
    <th>Name</th>
    <th>Addr</th>
  </tr>
  <tbody>
    <tr ng-repeat="c in Customers">
       <td>{{CustomerId}}</td>
       <td>{{Name}}</td>
       <td>{{c.Addr}}</td>
    </tr>
  </tbody>
</table>

注意：我把 ng-repeat 放在 tr 上，这可能是您需要的。我认为你不应该把它放在身体上。

Answer 2

试试下面的方法。我希望下面的代码片段结果显示了您想要的结果。

angular.module("aaa",[]).controller('MyController', function ($scope) {        
         $scope.Customers = [
            { CustomerId: 1, Name: "John Hammond", Addr:'India'          
            },
            {
                CustomerId: 2, Name: "Mudassar Khan", Addr:'India'                   
            },
            {
                CustomerId: 3, Name: "Suzanne Mathews",  Addr:'India'                  
            },
            {
                CustomerId: 4, Name: "Robert Schidner",  Addr: 'India'                   
            }
           ];       
           $scope.keys = Object.keys($scope.Customers[0]);

    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="aaa" ng-controller="MyController">
  <table>
           <tr>
                <th ng-repeat="key in keys"> 
    {{key}}
              </th>               
        </tr>
        <tbody ng-repeat="c in Customers">
            <tr>
              <td ng-repeat="key in keys">{{c[key]}}</td>                   
            </tr>
        </tbody>
    </table>
</div>

Answer 3

你指的是数据的排序顺序还是列的显示顺序？

接受的答案按指定的列顺序显示数据，但如果您希望数据本身排序，则只需向数据添加过滤器，如下所示：

<tbody ng-repeat="c in Customers|orderBy:['CustomerId','Name','Addr']">

这将按指定的字段对列表中的实际数据进行排序。

如何删除 ng-repeat 的默认顺序

How to remove default order of ng-repeat

html

javascript

angularjs

angularjs-ng-repeat