用于构建表格的二维循环

2D loops for building a table

本文关键字：二维 循环 构建 表格 用于      更新时间：2023-09-26

我想循环遍历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>。有没有找到一个无操作元素，我必须用它来处理这样的循环？

我不确定这是否可能。也许有人可以比我更有创造力。不过你可以试试这样的东西：

控制器-

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>

您可以在<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

相关文章：