Question

说实话，我甚至不知道如何设计这个。

从两个不同的来源，我会得到两个非常复杂的对象（简化）：

 var header = {
     fieldName1: {otherstuff: x},
     fieldName2: {otherstuff: y},
     fieldName3: {otherstuff: z}
 }

 var data = [
 {
     fieldName3: {someData: 1},
     fieldName2: {someData: 2},
     fieldName4: {someData: 3}
 },
 {
     fieldName2: {someData: 11},
     fieldName3: {someData: 22},
     fieldName1: {someData: 33}
 }
 ];

我想构建一个带有表头行的表，该行显示第一个对象的键和使用第二个对象的someData值构建的表行。

但是，当然，数据列需要与表头行相同的顺序。

    <table>
      <tr>
        <th ng-repeat="(fieldKey, fieldMeta) in header">{{fieldKey}}: {{fieldMeta.label}}</th>
      </tr>
      <tr ng-repeat="row in data">
        <td ng-repeat="value in row">{{value}}</td>
      </tr>
    </table>

那我该怎么做呢？我应该首先尝试对标题和数据对象进行排序（作为对象还是首先应该转换为数组），还是可以通过第二次重复重复中的orderBy来实现相同的选项？

我很确定当我花一两天的时间，我想出了一个解决方案，该解决方案包含几行实用程序中的100行代码，试图按问题解决问题。

我不需要现成的代码，但经验丰富的JS人员的一些指导将受到高度赞赏。

Answer 1

您可以尝试重复第二个内部ng-repeat中的标题，并使用这些键访问相应的行数据。这样，标题中数据的顺序就像定义的顺序一样。虽然这种方法的性能不确定。例如：

<table>
  <tr>
    <th ng-repeat="(fieldKey, fieldMeta) in header">{{fieldKey}}: {{fieldMeta.label}}</th>
  </tr>
  <tr ng-repeat="row in data">
    <td ng-repeat="(key, meta) in header">{{row[key]}}</td>
  </tr>
</table>

示例小提琴here。请注意，按对象键排序并不是最好的主意，因为订单无法保证，所以我建议转换为单个对象的数组。

两个ng-repeat，其中独立对象按键排序

1 个答案: