用于构建表格的 2D 循环答案

【问题标题】：2D loops for building a table用于构建表格的 2D 循环
【发布时间】：2016-01-05 22:14:22
【问题描述】：

我想在 angularjs 中循环一个二维结构以将其显示在表格中。数据如下：

data = {
    "keyA": ["valueA", "valueB"],
    "keyB": ["valueC", "valueD"]
}

输出应如下所示：

<table>
    <tr>
        <th>keyA</th>
        <td>valueA</td>
    </tr>
    <tr>
        <th>keyA</th>
        <td>valueB</td>
    </tr>
    <tr>
        <th>keyB</th>
        <td>valueC</td>
    </tr>
    <tr>
        <th>keyB</th>
        <td>valueD</td>
    </tr>
</table>

目前我的角度丰富的 html 不起作用，如下所示：

<table>
    <div ng:repeat="(key, values) in data">
    <div ng:repeat="value in values">
    <tr>
        <td>{{key}}</td>
        <td>{{value}}</td>
    </tr>
    </div>
    </div>
</table>

在这种情况下，我使用了<div> 元素，但它不起作用，因为显然<div> 不属于这样的<table>。是否有一些 No-Op-Element 的发现，我必须将其用于这样的循环？

【问题讨论】：

标签： javascript angularjs loops

【解决方案1】：

我不确定这是否可能。也许有人可以比我更有创意。不过你可以尝试这样的事情：

控制器-

var data = {
    "keyA": ["valueA", "valueB"],
    "keyB": ["valueC", "valueD"]
};

$scope.getPairs = function() {
  var ret = [];

  for(var key in data) {
    for(var i = 0; i < data[key].length; i++) {
      ret.push(key, data[key][i]);
    }
  }

  return ret;
}

HTML -

<table>
  <tr ng-repeat="pair in getPairs() track by $index">
      <td>{{pair[0]}}</td>
      <td>{{pair[1]}}</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您可以在<tr> 和<tbody> 元素上添加ngRepeat：

<table>
    <tbody ng-repeat="(key, values) in data">
        <tr ng-repeat="value in values">
            <th>{{key}}</th>
            <td>{{value}}</td>
        </tr>
    </tbody>
</table>

Plunker

【讨论】：

元素应该出现在元素内的上