javascript - 使用 ng-repeat 生成差异 View

Question

我有一个 json，其中包含已修改实体的修订/历史信息，该实体保存其旧值和新值。差异由 https://github.com/benjamine/jsondiffpatch 生成我自己进行了额外的解析以形成要呈现的最终 json 格式。

示例数据:

[
  {
    "createdBy": "admin@localhost",
    "modifiedAt": 1445113889873,
    "left": [
      {
        "Status": "Open"
      }
    ],
    "right": [
      {
        "Status": "In Progress"
      }
    ]
  },
  {
    "createdBy": "admin@localhost",
    "modifiedAt": 1445114315786,
    "left": [
      {
        "Description": "hello"
      },
      {
        "Assignee": "Uncle Bob (test@test)"
      }
    ],
    "right": [
      {
        "Description": "bye"
      },
      {
        "Assignee": "Willy Wonka (willy@hello)"
      }
    ]
  }
]

我正在寻找一种很好的方法来为此形成一个表格，其中对于每个修订版，我分别获得左列和右列以及单独行上的值。可能累了，但我不知道 ng-repeat 是如何工作的:

<div ng-repeat="(key, value) in vm.revisions | orderBy:'-modifiedAt'">
      <table class="table">
        <thead>
        <tr>
          <th width="20%">Field</th>
          <th width="40%">Old Value</th>
          <th width="40%">New Value</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        </tbody>
      </table>
    </div>

我希望得到这样的结果:

提前致谢!

Answer 1

如果我对数据格式的看法是正确的:

<div ng-repeat="revision in vm.revisions | orderBy:'-modifiedAt'">
  <table class="table">
    <thead>
      <tr>
        <th width="20%">Field</th>
        <th width="40%">Old Value</th>
        <th width="40%">New Value</th>
      </tr>
    </thead>
    <tbody ng-repeat="(index, left) in revision.left">
      <tr ng-repeat="(field, leftValue) in left">
        <td>{{field}}</td>
        <td>{{leftValue}}</td>
        <td>{{revision.right[index][field]}}</td>
      </tr>
    </tbody>
  </table>
</div>

在 jsfiddle 上查看:http://jsfiddle.net/q6zqgfr8/