AngularJS/HTML表格格式化

Question

對此有一點噩夢 - 我試圖僅使用ng-repeat和HTML顯示$http數據表。我有這個至今：

<table border="1" style="width:100%" ng-repeat="data in boxData"> 
      <tr> 
      <td>{{data.entity}}</td> 
      <td>{{data.security.securityID}}</td> 
      <td>{{data.security.identifiers[0].value}}</td> 
      <td>{{data.security.identifiers[1].value}}</td> 
      <td>{{data.security.identifiers[2].value}}</td> 
      <td>{{data.depot}}</td> 
      <td>{{data.date}}</td> 
      <td>{{data.date}}</td> 
      <td>{{data.primeBroker}}</td> 
      <td>{{data.activity}}</td> 
      <td>{{data.timestamp}}</td> 
      <td>{{data.sequence}}</td> 
      <td>{{data.activity}}</td> 
      <td>{{data.balance[0].value}}</td> 
      <td>{{data.balance[1].value}}</td> 
      <td>{{data.balance[2].value}}</td> 
      <td>{{data.balance[3].value}}</td> 
      <td>{{data.balance[4].value}}</td> 
      </tr> 
      </table> 

但它輸出這樣的：

02 50167 42630125 US518252CR03 518252CR0 CCT 20160111  20160111 N UPDATE 2016-02-03T20:01:39.015 4 UPDATE -2352    
02 81106 7918922 IT0000062072 044998912 BNY 20160111 20160111 N UPDATE 2016-02-03T20:01:42.158 4 UPDATE 532346    
01 51024 36530971 US404119BK49 404119BK4 CCT 20160118 20160118 N UPDATE 2016-02-03T20:01:31.397 4 UPDATE 3886     
02 50555 39729417 US57183MCT53 57183MCT5 900 20160111 20160111 N UPDATE 2016-02-03T20:01:39.661 20 UPDATE 66402000 -51402000 

（我故意沒有格式化這個給你儘可能多的想法成爲可能），如果你能想象之上，但每個單元周圍都有一個邊框，每個單元格的邊框寬度由每個數字或字符串的長度定義爲。

我期待<table>，<tr>和<td>以可能地自動創建列寬度取決於在每列中的最寬的單元格的寬度，但沒有列具有適當的寬度，每個小區是其自身..

Answer 1

穿戴您的<tr>標籤中的ng-repeat。

<table border="1" style="width:100%"> 
    <tr ng-repeat="data in boxData"> 
     <td>{{data.entity}}</td> 
     <td>{{data.security.securityID}}</td> 
     <td>{{data.security.identifiers[0].value}}</td> 
     <td>{{data.security.identifiers[1].value}}</td> 
     <td>{{data.security.identifiers[2].value}}</td> 
     <td>{{data.depot}}</td> 
     <td>{{data.date}}</td> 
     <td>{{data.date}}</td> 
     <td>{{data.primeBroker}}</td> 
     <td>{{data.activity}}</td> 
     <td>{{data.timestamp}}</td> 
     <td>{{data.sequence}}</td> 
     <td>{{data.activity}}</td> 
     <td>{{data.balance[0].value}}</td> 
     <td>{{data.balance[1].value}}</td> 
     <td>{{data.balance[2].value}}</td> 
     <td>{{data.balance[3].value}}</td> 
     <td>{{data.balance[4].value}}</td> 
    </tr> 
</table>