Question

我正在尝试使用AngularJS和ng-repeat创建以下表结构（示例1）。我唯一的要求是 tbody 不会重复。我正在使用的数据具有product.productunit的结构。具有rowspan = 3的左表格单元格将显示图像，右侧3个单元格将显示该图像的产品单元。然后将整个表放置在固定的可滚动网格中，使用css：tbody {overflow-y：scroll}固定页眉/页脚。不幸的是，在每个产品之间有多个tbodys将滚动分解为一个表，如（例2）所示，它是不工作的。

更新

我的问题是如何删除tbody中的ng-repeat。下面的人投了我的问题，因为我的例子显示了ng-repeat和tbody。我问的是如何重写我的代码以正确地呈现html（例1）。最终结果应该允许我有一个表，如下面的小提琴示例链接。

jsfiddle.net/TroyAlford/SNKfd

示例1

<table style="width: 500px; border-style: solid; border-width: 1px">
<tbody>
<tr>
    <td rowspan="3" style="width: 250px">
    <img src=".." />
    </td>
    <td>Unit 1</td>
</tr>
<tr>
    <td>Unit 2</td>
</tr>
<tr>
    <td>Unit 3</td>
</tr>
<tr>
    <td rowspan="3" style="width: 250px">
    <img src=".." />
    </td>
    <td>Unit 1</td>
</tr>
<tr>
    <td>Unit 2</td>
</tr>
<tr>
    <td>Unit 3</td>
</tr>

</tbody>


</table>

这是绑定到我的嵌套产品和单位的AngularJS。我也知道ng-repeat-start和ng-repeat-end到目前为止我认为不会起作用？

其次，下面的例子首先必须为每个产品重复一个TR，每个产品都有一个嵌套的TD。

示例2

<div class="scrollable-table-wrapper">

    <table id="tablegrid">
        <thead>
            <tr>
                <th>Product</th>
                <th>Unit</th>
            </tr>
        </thead>

        <!-- my issue is here with tbody repeated for each product -->
        <tbody ng-repeat="product in productsList">

           <tr ng-repeat="resProductUnit in product.ResProductUnits">

            <!-- place first cell with rowspan to match units length -->
            <td ng-if="$index == 0" rowspan="{{product.ResProductUnits.length}}">
               <img src="{{ product.ImageGalleryId }}" />
            </td>

            <!-- /ResProductUnits -->
            <td>
               <label>Unit: {{resProductUnit.Title}}</label>
            </td>

            </tr>       
            <!-- /ResProductUnits-->
        </tbody>

    </table>

</div>

Answer 1

ng-repeat重复声明它的元素。尝试将ng-repeat移至<tr>和<td>。如果您想为每个产品添加单独的表格，请将外部ng-repeat放在<table>元素上。

AngularJS ng-repeat tbody重复

1 个答案: