Angularjs：在 tr 标签上使用 ng-repeat 和 ng-switch答案

【问题标题】：Angularjs: ng-repeat and ng-switch on tr tagsAngularjs：在 tr 标签上使用 ng-repeat 和 ng-switch
【发布时间】：2013-01-10 23:07:39
【问题描述】：

我正在尝试使用 AngularJS 创建一个事件列表表。但是每个事件都有一个类型，不同类型的事件内容截然不同，有些类型还会生成不止一行。

在一个完美的世界里，我会这样做：

<tbody>
  <ng-repeat="event in events">
    <ng-switch on="event.type">
      <ng-switch-when="type1">
        <tr>
          ...
        </tr>
        <tr>
          ...
        </tr>
      </ng-switch-when>
      <ng-switch-when="type2">
        <tr>
          ...
        </tr>
      </ng-switch-when>
      ...
    </ng-switch>
  </ng-repeat>
</tbody>

但这不起作用，因为大多数浏览器会丢弃或重新定位 ng 标签以强制 tbody 仅包含 trs。

我看到的相关问题 (How to use ng-repeat without an html element) 的唯一解决方案是拥有多个 tbody 元素；我不想那样做，但即使我这样做，给 tbody ng-repeat 和 ng-switch 属性，我仍然有一个问题，我不能在单个 ng-switch-when 中包装多个 tr .

有没有办法在 AngularJS 中做到这一点，或者这是不可能的？

【问题讨论】：

标签： javascript angularjs html-table ng-switch

【解决方案1】：

我遇到了这个问题，最好的建议是不要使用表格：

只需使用 * 数量的子 div 类做一个父 div id，就像它们是 tr's 和 td's...

我没有在角度源中检查过这个，但我假设表格元素没有以某种方式交织在一起，谁知道..

【讨论】：

是的，但有时您确实需要一张桌子。经过这么多年，仍然没有另一种可靠的方法来允许跨跨行的等宽自动调整列。此外，Angular 声称自己是最具有 HTML 精神的框架。遇到一个常见的用例，答案是“你不能使用自 1.0 以来就成为 HTML 一部分的标记”......出了点问题。

【解决方案2】：

也许最好的选择是根据您的 type1/type2 生成适当标记的指令？

你也可以用 ng-hide/ng-show 来做，虽然这会产生额外的不必要的标记

【讨论】：

我想我可以创建一个指令，但我必须为所有表标记创建指令，因为浏览器在 AngularJS 处理指令之前解析 DOM - 如果我在里面放一些 <my-tr> 指令<table> 标签，它会被转移到表格的外部。所以我认为我必须为 table、tbody、tr、th 和 td 构建一系列指令。
另一个可能更好的选择是将您的 ng-repeat 放在 tr 元素上，然后在每一行中使用嵌套表。和 ng-switch 在行内容上，但在任何一种情况下，重复行的内容总是只是一个 td