Angularjs 获取ng repeat以使用对象属性顺序

我有一个动态数据集来表示角度。换句话说，在运行时之前，我无法访问返回的列名

我可以将列名显示为标题，数据本身也可以。ng repeat（或者可能是JS本身）拒绝按照创建列的顺序返回列。你可以在小提琴中看到，这些列被排序，因此它们显示为“年龄-姓名-体重”，我需要它们出现的方式，“姓名-年龄-体重”

我创建了另一个列名数组及其正确顺序（$scope.order），但我似乎找不到一种方法将其和Angular一起用于对数据进行排序

请给我一个方法，以原始顺序呈现这些数据

我创建了一个JSFIDLE：

下面是一个设置数据的简单范围：

function MainCtrl($scope) {
$scope.output = [
    {
        "name": "Tom",
        "age": "25",
        "weight" : 250
    },
    {
        "name": "Allan",
        "age": "28",
        "weight" : 175
    },
    {
        "name": "Sally",
        "age": "35",
        "weight" : 150
    }
];

$scope.order = {
    "name": 1,
    "age": 2,
    "weight" : 3
};           
}

以下是HTML：

<table ng-app ng-controller="MainCtrl">
  <thead>
    <tr>
      <th ng-repeat="(key,value) in output.0">{{key}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in output">          
      <td ng-repeat="(key,value) in row">{{value}}</td>
    </tr>
  </tbody>
</table>

{{key}}
{{value}}

（注意最后一次ng重复中的

（key，value）

是我为本例取出的ng类代码所需要的。）

JavaScript对象中的属性顺序永远无法保证。你需要使用一个列表

您只需将

$scope.order

转换为数组：

$scope.order = [
    "name",
    "age",
    "weight"
];

在HTML中使用它，如下所示：

<table ng-app ng-controller="MainCtrl">
  <thead>
    <tr>
        <th ng-repeat="key in order">{{key}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in output">          
      <td ng-repeat="key in order">{{row[key]}}</td>
    </tr>
  </tbody>
</table>    

{{key}}
{{行[键]}}

虽然不能保证javascript对象的顺序，但这可能在大多数或所有情况下都有效。这只是将对象循环到数组中。如果可能的话，将来自服务器的数据放在数组中可能是更好的方法，1描述结构（键），另一个描述数组的数据集

$scope.getRow = function(row) {
  var arr = [];
  for (var k in row) {
    if (k !== '$$hashKey') {
      arr.push(row[k]);
    }
  }
  return arr;
};
$scope.getKeys = function(row) {
  var arr = [];
  for (var k in row) {
    if (k !== '$$hashKey') {
      arr.push(k);
    }
  }
  return arr;
};

html：

<table ng-app ng-controller="MainCtrl">
  <thead>
    <tr>
      <th ng-repeat="(key,value) in getKeys(output[0])">{{value}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in output">          
      <td ng-repeat="(key, value) in getRow(row)" ng-class="getKeys(output[0])[key]">{{value}}</td>
    </tr>
  </tbody>
</table>

{{value}}
{{value}}

您查看了我的答案了吗？一切都好吗。我太专注于角度有序解了，完全忽略了这个。它实际上也简化了代码的其他部分。很好，但是如果对象是由另一个开发人员编写的，在您的解决方案中，如果开发人员在名称上犯了错误，例如，write

wieght

而不是

weight

，则顺序将失败。我没有尝试过，但您的解决方案似乎适用于任何情况。我接受CodeHater的答案只是因为它更适合我的代码，而且我可以在另一个部分轻松创建

顺序

数组。