javascript - 两个带有按键排序的独立对象的 ng-repeat

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

我想建立一个表，表头行显示第一个对象的键，表行用第二个对象的一些数据值构建。

当然，数据列需要与表格标题行相同的顺序。

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

那么我该如何处理呢？我应该首先尝试对 header 和数据对象进行排序(作为对象还是应该先转换为数组)，或者是否可以选择通过第二个 ng-repeat 中的 orderBy 实现相同的目的？

我非常确定，当我花一两天时间时，我会想出一个解决方案，该解决方案由多个实用程序类中的 100 行代码组成，试图逐个解决问题。

我不需要现成的代码，但非常感谢有经验的 JS 人员提供一些指导。

Answer 1

您可以尝试在第二个内部 ng-repeat 中重复您的 header ，并使用键访问适当的行数据。这样，标题中数据的顺序就作为定义的顺序。不确定这种方法的性能。例如:

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

fiddle 示例 here .请注意，按对象键排序并不是最好的主意，因为无法保证顺序，因此我建议转换为单个对象的数组。