Question

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

我不能使用ng-repeat-start，因为我想使用虚拟滚动，而我找到的库都没有支持start / end概念。

这是一个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，因此我不想在每个时使用ng-if / ng-switch-

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

更新II：就我而言，＆＃39; tr＆＃39;标签本身根据条件呈现不同

Answer 1

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

您显然正在尝试将ng-switch-when用作ng-switch-when的逻辑容器，但由于ng-switch-default（和<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>）支持multi-element，因此您不需要＆＃ 39;需要这个容器：

{{1}}

Answer 2

您似乎无法将<DIV>放在<TR>之内，而是放在<TD>之前。

解决方案1 ：在每个<TD>中放置条件表达式。

<!-- TDs for even row -->
<td ng-if="$even">{{item}} is even</td>
<td ng-if="$even">even content</td>

<!-- TDs for odd row -->
<td ng-if="!$even">{{item}} is odd</td>
<td ng-if="!$even">odd content</td>

解决方案2 ：对于相当复杂的表结构，您可以考虑创建自己的指令来表示行单元格。

表格中的ng-repeat和条件tr

2 个答案: