使用 ng-repeat 构建表 [关闭]答案

【问题标题】：using ng-repeat to build a table [closed]使用 ng-repeat 构建表 [关闭]
【发布时间】：2020-06-11 23:08:30
【问题描述】：

我有这样的数据结构：

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

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

我不知道如何在这个数据结构上使用 ng-repeat 来获取所需的表。

TIA。

【问题讨论】：

为什么Cuisines 和Places to visit 在同一行？
这就是设计师想要的样子，在一个屏幕上获得更多的指标......而不是一个长滚动页面@AlonEitan
我投票决定重新打开，因为我能够理解这个问题的要求足以写出一个我认为能够解决问题的答案。

标签： javascript angularjs angularjs-ng-repeat css-tables

【解决方案1】：

如果您想使用 html 表格，您需要重新格式化您的数据，并且可能希望使用 ng-repeat-start 和 ng-repeat-end，它们允许数组中的单个项目使用多个元素。

例如，一“行”数据将 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”数组的每个元素都会创建两个表格行，并包含用于并排项目的“a”和“b”元素。

codepen

【讨论】：