Question

我想循环遍历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，我必须使用这样的循环？

Answer 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>

Answer 2

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

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

better consistency between browsers

用于构建表的2D循环

2 个答案: