javascript - Angular : Display 2D Array in table format

Question

我有一个数据数组 (lanes)，它本身包含一个数组 (timePeriods):

lanes: [{
 lane: 'Lane 1',
    timePeriods: [{
        start: '08:00',
        end: '08:15',
        trays: Math.floor(Math.random() * 6) + 1
    }, {
        start: '08:15',
        end: '08:30',
        trays: Math.floor(Math.random() * 6) + 1
    }, {
        start: '08:30',
        end: '08:45',
        trays: Math.floor(Math.random() * 6) + 1
    }, {
        start: '08:45',
        end: '09:00',
        trays: Math.floor(Math.random() * 6) + 1
    }]
 },
 ...
 ]

我想做的是以表格格式显示它，就像这样，但我不确定如何正确排列列和行？我可能需要嵌套表吗？

我创建了一个 jsfiddle，但只是输出 trays 的静态数字，而不是 trays 的实际值，因为我不确定如何:http://jsfiddle.net/boe5u2sj/

Answer 1

您可以使用单个 <table> 来完成此操作，只需在显示之前重新排列数据即可。

由于您要迭代每一行，因此如果您像这样排列数据(例如)，则会更容易:

{
  "08:00-08:15": {
    "Lane 1": {
      "trays": 1
    },
    "Lane 2": {
      "trays": 6
    }
  },
  "08:15-08:30": {
    "Lane 1": {
      "trays": 4
    },
    "Lane 2": {
      "trays": 5
    }
  },
  ...

为了做到这一点，请使用如下内容:

vm.rep = {};
_.forEach(vm.report.lanes, function(lane) {
    _.forEach(lane.timePeriods, function(timePeriod) {
        var time = timePeriod.start + "-" + timePeriod.end;
        if (vm.rep[time] == null) {
            vm.rep[time] = {};
        }
        vm.rep[time][lane.lane] = { trays: timePeriod.trays };
    });
});

然后，在 HTML 上:

<table class="table">
  <thead>
     <tr>
         <th><!-- time periods --></th>
         <th ng-repeat="lane in vm.lanes">{{lane}}</th>
      </tr>
  </thead>
  <tbody>
    <tr ng-repeat="(time, lanes) in vm.rep">
        <td>{{time}}</td>
        <td ng-repeat="(key, lane) in lanes">{{lane.trays}}</td>
    </tr>
  </tbody>
</table>

<强> jsFiddle