Question

我有一个动态数据集来呈现Angular。换句话说，我无权访问在运行时返回的列名。

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

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

请给我一个按原始顺序提供此数据的方法。

我创建了一个JSFiddle：http://jsfiddle.net/GE7SW/

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

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>

（注意我在本例中使用的ng-class代码需要最后一次ng-repeat中的(key,value)。）

Answer 1

永远无法保证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>

的 Fiddle

Answer 2

Your updated fiddle here (click).

虽然无法保证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>

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

2 个答案: