javascript - 表格和条件 tr 中的 ng-repeat

Question

我有一组不同类型的元素。我想使用 ng-repeat 迭代它们，并有条件地为每种类型绘制正确的 tr。

我不能使用 ng-repeat-start，因为我想使用虚拟滚动，而且我找到的库都不支持开始/结束概念。

这是一个 jsfiddle:http://jsfiddle.net/mx6v8j98/1/ ，这是行不通的。这是 HTML 部分:

<div ng-app ng-controller="MyCtrl">
    <table>
        <tbody>
            <tr ng-repeat="item in itemsList" ng-switch="$even" ng-class-even="'even'" ng-class-odd="'odd'">
                <div ng-switch-when="true">
                    <td>{{item}} is even</td>
                    <td>even content</td>
                </div>
                <div ng-switch-default>
                    <td>{{item}} is odd</td>
                    <td>odd content</td>
                </div>
            </tr>
        </tbody>
    </table>
</div>

在我的真实案例中，我有很多内容复杂的 td，所以我不想在每个 td 上使用 ng-if/ng-switch-when

更新:我可以将 ng-repeat 放在 <tbody> 上标签，但这看起来很难看，我不确定样式的后果是什么

更新 II:在我的例子中，“tr”标签本身根据条件呈现不同

Answer 1

如另一个答案所述，<div>不允许作为 <tr> 的子元素.

您显然正在尝试使用 <div>作为 ng-switch-when 的逻辑容器, 但自 ng-switch-when (和 ng-switch-default )支持 multi-element ，你不需要这个容器:

<tr ng-repeat="item in items" ng-switch="$even">

  <td ng-switch-when-start="true">{{item}} is even</td>
  <td>even content 1</td>
  <td>even content 2</td>
  <td ng-switch-when-end>even content last</td>

  <td ng-switch-default-start>{{item}} is odd</td>
  <td>odd content 1</td>
  <td>odd content 2</td>
  <td ng-switch-default-end>odd content last</td>

</tr>