NG-重复表和条件TR [英] ng-repeat in table and conditional tr

问题描述

我有不同类型的元素的集合。我想用NG-重复迭代他们，有条件地得出正确的TR每每种类型。

I have a collection of elements of different types. I want to iterate them using ng-repeat, and conditionally draw the right tr per each type.

因为我想用虚拟滚动，没有我发现的库支持的开始/结束的概念，我不能使用NG-重复启动。

I can't use ng-repeat-start since I want to use virtual scrolling and none of the libraries I found supports the start/end concept.

下面是一个的jsfiddle： http://jsfiddle.net/mx6v8j98/1/ ，该不工作。这里是HTML部分：

Here is a jsfiddle: http://jsfiddle.net/mx6v8j98/1/, which doesn't work. here is the HTML part:

<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-开关时，每个

In my real world case, I have many td with complex content, so I don't want to use ng-if/ng-switch-when on each

更新：我可以把NG重复的＆LT; TBODY＆GT; 标签，但是这看起来丑陋，我不知道有什么后果都对造型

Update: I can put the ng-repeat on the <tbody> tag, but that looks ugly and I'm not sure what the consequences are regarding styling

更新二：在我的情况下，TR标签本身是根据条件不同呈现

Update II: In my case, the 'tr' tag itself is rendered differently according to a condition

推荐答案

作为另一个答案所述，＆LT; D​​IV＆GT; 不允许作为的子元素＆LT; TR方式＆gt;

As stated in another answer, <div> is not allowed as a child element of <tr>.

您显然试图用＆LT; D​​IV＆GT; 为 NG-开关时的逻辑容器，但由于 NG-开关时（和 NG-开关默认）支持的多元素，则不需要此容器：

You are clearly trying to use <div> as a logical container for ng-switch-when, but since ng-switch-when (and ng-switch-default) supports multi-element, you don't need this container:

<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>

这篇关于NG-重复表和条件TR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！