遍歷分層數據在AngularJS中創建展平的表格視圖

Question

我試圖使用AngularJS創建有效的表格標記，但無法弄清楚如何去做。我看到過類似的問題，但沒有一個能夠滿足我的需求。

我有存儲在一個結構中的一些競賽結果數據如下：

{ 
    "date": "1900-01-01", 
    "venue": "Venue", 
    "results": { 
     "10k": { 
      "freestyle": { 
       "male": [ 
        "...a bunch of individual racer results" 
       ], 
       "female": [ 
        "...a bunch of individual racer results" 
       ] 
      }, 
      "classical": { 
       "male": [ 
        "...a bunch of individual racer results" 
       ], 
       "female": [ 
        "...a bunch of individual racer results" 
       ] 
      } 
     }, 
     "5k": { 
      "freestyle": { 
       "male": [ 
        "...a bunch of individual racer results" 
       ], 
       "female": [ 
        "...a bunch of individual racer results" 
       ] 
      }, 
      "classical": { 
       "male": [ 
        "...a bunch of individual racer results" 
       ], 
       "female": [ 
        "...a bunch of individual racer results" 
       ] 
      } 
     } 
    } 
} 

所以它的結構爲：距離，款式，性別，個人車手。

如下，我可以使這些成果轉化爲單個表：

<div ng-show="race.results" ng-cloak> 
     <div ng-repeat="(dist, styles) in race.results"> 
       <div ng-repeat="(style, genders) in styles"> 
         <div ng-repeat="(gender, finishers) in genders"> 
           <table class="raceResultsTable"> 
             <tr> 
               <th class="raceEvent" colspan="6"> 
                 <h3 class="tableHeading" id="{{ dist|createKey }}_{{ style|createKey }}_{{ gender|createKey }}_results">{{ dist }} {{ style }} {{ gender }}</h3> <a href="#result_index" class="backToTop" title="Back to results index">&#65514;</a> 
               </th> 
             </tr> 
             <tr> 
               <th><strong>Place</strong></th> 
               <th><strong>Name</strong></th> 
               <th><strong>Age</strong></th> 
               <th><strong>Age Group</strong></th> 
               <th><strong>Time</strong></th> 
               <th><strong>Pace</strong></th> 
             </tr> 
             <tr ng-repeat="racer in finishers | orderObjectBy:'place'"> 
               <td>#{{ racer.place }}</td> 
               <td>{{ racer.name }}</td> 
               <td>{{ racer.age }}</td> 
               <td>{{ racer.age_group }}</td> 
               <td>{{ racer.time }}</td> 
               <td>{{ racer.pace }}/k</td> 
             </tr> 
           </table> 
           <p></p> 
         </div><!-- genders --> 
       </div><!-- styles --> 
     </div><!-- distances --> 
</div><!-- show/hide --> 

這創造了很多額外的標記，只是爲了方便重複，但它的作品。我遇到的問題是我想要一個頂部的索引。最初它在每張表中只有一條線固定在H3的ID上。這工作得很好。但是，現在我想包含導出鏈接以及到頁面表的鏈接，並將所有內容對齊，我想將其放到表中，但我不知道如何執行此操作。要讓每一行都在同一個表中，需要在本質上是「虛擬」元素上有多個ng-repeat迭代器，但我不知道我可以這樣做，並在<table>內生成有效標記。

理想情況下，我可以做這樣的事情......

<tr ng-repeat="(dist, (style, (gender, finishers) in genders) in styles) in race.results"> 
    <td><a href="#{{dist}}_{{style}}_{{gender}}_results">{{dist}} {{style}} {{gender}}</a></tr> 
    <td><a href="#" class="download">CSV</a></td> 
</tr> 

AngularJS要求所有的邏輯連接到DOM元素意味着它需要產生不必要的標記。我看到一個提到創建一個「指令」，這對我來說看起來很陌生。我不反對學習AngularJS的來龍去脈，但這讓我覺得應該是直截了當的。在像Twig這樣的模板系統中，這會很簡單，但我覺得我將不得不跳過大量的工作來完成AngularJS。

有沒有一種直接的方法可以做到這一點，它不涉及我的控制器內部的所有邏輯？如果指令方法是唯一的選擇，那就這樣吧，但是我認爲這對AngularJS和我追求它的興趣來說是一個巨大的標記。

Answer 1

這裏最大的問題是ng-repeat只適用於數據數組。你希望它迭代數據對象，這是不行的。您需要更改數據結構，或者針對每個層次的層次結構對模板進行硬編碼。