带有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指令。