使用 ng-repeat 构建 table

Question

我有这样的数据结构：

{
  "Places to visit": {
    "Best": [
      "place1",
      "place2"
    ],
    "Worst": [
      "place3",
      "place4"
    ]
  },
  "Cuisines": {
    "Best": [
      "cuisine1",
      "cuisine2"
    ],
    "Worst": [
      "cuisine3",
      "cuisine4"
    ]
  },
  "Mobiles": {
    "Best": [
      "mobile1",
      "mobile2"
    ],
    "Worst": [
      "mobile3",
      "mobile4"
    ]
  }
}

使用此数据结构，我需要在 UI 中构建一个 table，它应该如下所示（一行中有 2 个指标）。

我不知道如何在此数据结构上使用 ng-repeat 来获得所需的 table。

TIA。

Answer 1

如果你想使用 html table，你需要重新格式化你的数据，并且可能想要使用允许多个元素的 ng-repeat-start 和 ng-repeat-end对于数组中的单个项目。

例如，'row' 的数据将有 a 的景点和 b 的美食：

<table>
  <thead>
    <tr>
      <th>&nbsp;</th><th>best</th><th>worst</th><th>&nbsp;</th><th>best</th><th>worst</th>
    </tr>
    </thead>
  <tbody>
    <tr ng-repeat-start="row in vm.rows">
      <td rowspan="2">{{row.a.text}}</td>
      <td>{{row.a.items[0]}}</td>
      <td>{{row.a.items[2]}}</td>
      <td ng-if="row.b" rowspan="2">{{row.b.text}}</td>
      <td ng-if="row.b">{{row.b.items[0]}}</td>
      <td ng-if="row.b">{{row.b.items[2]}}</td>
    </tr>
    <tr ng-repeat-end>
      <td>{{row.a.items[1]}}</td>
      <td>{{row.a.items[3]}}</td>
      <td ng-if="row.b">{{row.b.items[1]}}</td>
      <td ng-if="row.b">{{row.b.items[3]}}</td>
    </tr>
  </tbody>
</table>

因此 'items' 数组的每个元素都会创建两个 table 行，并包含并排项的 'a' 和 'b' 元素。

codepen

使用 ng-repeat 构建 table

using ng-repeat to build a table

javascript

angularjs

angularjs-ng-repeat

css-tables