使用 ng-repeat 基于列表构建一个表，按 AngularJS 和 Javascript 中的列排序答案

【问题标题】：build a table with ng-repeat based on lists, ordered by columns in AngularJS and Javascript使用 ng-repeat 基于列表构建一个表，按 AngularJS 和 Javascript 中的列排序
【发布时间】：2021-10-27 10:04:54
【问题描述】：

我想用ng-repeat 建立一个表。但在我的 JavaScript 代码中，我没有一个包含键和值的列表，而是在一个更大的列表中有 3 个列表，如下所示：

tableau = [{
    'ws': wslist
  },
  {
    'days': dayslist
  },
  {
    'tnq': tnqlist
  },
]

列表中有什么？ wslist、dayslist 和 tnqlist 用动态实时数据填充自己，这些数据会非常频繁地刷新自己。

我想知道我是否可以在带有 ng-repeat 的表中显示这些数据/这些列表（并且不能使用我们通常看到的静态键/值对数据集，例如 @ 987654333@ 并将它们在行中放在一个带有 ng 重复的表中。

我试过这个：

<table cellpadding="20" rules="GROUPS" frame="BOX">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th class="xl154" style="width: 100px">
        Day 1something like {{day.tableau}}
      </th>
      <th class="xl154" style="width: 100px">day 2</th>
      <th class="xl154" style="width: 100px">day 3</th>

    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in  ctrl.tableau">
      <td class="xl153">{{item.ws}}</td>
      <td class="xl153">{{item.tnq}}</td>
    </tr>
  </tbody>
</table>

我得到了这个：

wslist 的所有值都在同一个单元格中并在行中。它们应该分开，并且每个都在其列中的单元格中。我的表格应该看起来像 this, more specifically like this. （在图片上，tnq% 的值意味着在第 1 天的列中垂直读取，然后在第 2 天也垂直读取等等……）

为了让您了解列表的长度和性质，您可以在第一张图片中看到：红色为this is the wslist 和the second：蓝色为tnqlist，红色为@ 987654338@.

您知道是否可以使用ng-repeat 来完成此操作，如果可以，我该如何为wslist 和tnqlist（所以 2 个分开的列）？或者如果不可能，是否有任何其他方式我可以用我的动态列表列表构建一个表格如图“我应该拥有的表格”？

非常感谢您提供所有可能有帮助的答案

【问题讨论】：

我无法确定this 的正面或反面，但如果它只是迭代外部ng-repeat 内的那些内部数组，您可以只嵌套ng-repeats，甚至嵌套如果你需要的话。您能否提供一个更具体的模型来说明您希望显示的外观？
谢谢你的回答，我真的不知道我应该如何迭代或嵌套 ng-repeat 或表格，你能给我一个例子吗？问题是一个列表的每个元素都应该有自己的单元格并放置在列中。此外，我刚刚添加了一个更具体的模拟我想要的显示，正如你所问的。非常感谢
所以我想我很难理解的是这个数据结构是如何工作的，不管它是如何在屏幕上呈现的。以您更新的屏幕截图为例，您怎么知道sbe_global-service-requests-for-selfcare 对应于第 1 天的 100%、第 2 天的 0 和第 3 天的 152？ wslist 有 768 个元素，tnqlist 有 1245 个元素，所以它们的索引并不对齐。如果他们这样做了，则可以推断出对象结构。我不确定这些数据是如何相互关联的。你能帮我澄清一下吗？

标签： javascript html angularjs list html-table

【解决方案1】：

遗憾的是，您尝试做的事情比预期的要复杂，我们不知道数据之间的关系。

根据您的解释，这是一个 plnkr：https://plnkr.co/edit/REHNDW8CU330yBPY

所以，我的建议是：

对于标题，您可以遍历日期列表。比如：

<head>
  <tr>
    <th>Web Service </th>
    <th style="width: 100px" ng-repeat="day in daysList">
      {{day}}
    </th>
  </tr>
</thead>

然后，对于每个服务，您将不得不迭代写入名称，而且还要查找每天的值。像这样：

<tr ng-repeat="ws in wsList">
  <td class="xl153">{{ws}}</td>
  <td style="width: 100px" ng-repeat="day in daysList">
    {{getValue(ws, $parent.$index, day, $index)}}. 
  </td>      
</tr>

其中getValue 是一个自定义函数，根据您获取信息的需要。

【讨论】：