Angular：以表格格式显示二维数组答案

【问题标题】：Angular: Display 2D Array in table formatAngular：以表格格式显示二维数组
【发布时间】：2014-11-02 14:54:20
【问题描述】：

我有一个数据数组 (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/

【问题讨论】：

标签： javascript arrays angularjs html-table

【解决方案1】：

一个表就足够了，但代码可能相当混乱/乏味。如果您放入该数组的数据是在某种循环中生成的，则可能会简单得多，因为您可以使用相同的循环将数据放入表中。 HTML 需要这样的东西：

<table id="tbl"></table>

您的 JavaScript 需要访问该表：

var tabl, rows=[], data=[];  //extra variables used farther down
tabl=document.getElementById("tbl");

填充数组的循环需要创建表格行和表格数据元素，并在填充数组的同时填充它们（假设索引变量“i”和“j”在这里）：

rows[i]=document.createElement("tr"); //table-row element
tabl.appendChild(rows[i]);
data[j]=document.createElement("td"); //table-data element
data[j].innerHTML="&nbsp;";  //top-left corner of table, blank/space, when i=0 and j=0
rows[i].appendChild(data[j]);

您将增加“j”并修改第一个表格行中您需要的每个数据项的 innerHTML 数据，从您的数组中获取数据（或者在您将数据放入数组，如果数组是在循环中生成的）。对于第二行，当 i=1 时，您希望第一个数据项的 (j=0) innerHTML 是从数组中提取的时间、连字符和从数组中提取的另一个时间。第二个数据项的 innerHTML 将是您的“托盘”编号之一。等等。只需记住使用 appendChild 将每一行附加到“表”，并使用 appendChild 将数据项附加到当前行。（嗯......我可能会倒退；您可能必须在将其附加到表格之前填写该行，以确保所有附加内容实际上都成为表格的一部分。）最后，只要有相同的每行数据项的数量，当浏览器在网页上显示一个构造的表格时，一切都应该合理地对齐。（如果需要，您可以在将数据元素附加到行元素之前指定“样式”信息。）

如果不使用循环，则需要构建整个 HTML 表格，为每个表格数据元素分配一个唯一的“id”。然后，您的 JavaScript 必须为这些表数据元素中的每一个执行 getElementById()，并为其分配适当的 innerHTML 值。又乱又乏味！

【讨论】：

【解决方案2】：

您可以使用单个<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

【讨论】：