帶有ng-repeat的全月視圖表？

Question

想要創建一個像這樣的表

（忽略樣式）。我弄糊塗瞭如何合成數據以在html中製作此表。

$scope.toddlers = [ 
{ 
    "name": "a", 
    "day": 1, 
    "total": 3 
}, 
{ 
    "name": "b", 
    "day": 2, 
    "total": 4 
}, 
{ 
    "name": "c", 
    "day": 4, 
    "total": 1 
} 
]; 

我想我需要改變我的數據格式或者我不能讓這張表正確。我應該如何格式化我的數據才能得到這個結果。

僅供參考：我通過使用mongodb聚合獲取我的數據。

plunker link

Answer 1

這個片段可以產生你希望的佈局：

<table border="1"> 
    <tr> 
    <th></th> 
    <th ng-repeat="day in days">{{day}}</th> 
    </tr> 
    <tr ng-repeat="toddler in toddlers"> 
    <td>{{toddler.name}}</td> 
    <td ng-repeat="day in days"> 
     <span ng-if="toddler.day === day">{{toddler.total}}</span> 
     <span ng-if="toddler.day !== day">0</span> 
    </td> 
    </tr> 
</table> 

它首先重複天th，有一個額外的th所有的天之前。那麼如果當前學步日與當天匹配，則顯示toddler.total，否則0使用ng-if指令。