使用ng-repeat生成差異視圖

Question

我有一個json包含修改實體的修訂/歷史信息，該修改實體保存其舊值和新值。 Diff與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-重複工作，爲這個：

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