AngularJS ng-repeat tbody duplicated

Question

I'm trying to create the following table structure (Example 1) with AngularJS and ng-repeat. The only requirement I have is that the tbody does not get repeated. The data I'm working with has structure of product.productunit. The left table cell that has a rowspan=3 will display an image and the follow right 3 cells will display product units of that image. The entire table will then be placed in a fixed scrollable grid with fixed header/footers using css: tbody {overflow-y: scroll}. Unfortunately having multiple tbodys between each product breaks apart scrolling as one table as shown in (Example 2) which is non-working.

UPDATE

My question is how to remove the ng-repeat within the tbody. People below voted my question down due to the fact my example shows the ng-repeat together with tbody. I'm asking on how to rewrite my code to render the html correctly like in (Example 1). The end result should allow me to have a table like the following fiddle example link.

jsfiddle.net/TroyAlford/SNKfd

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

This is the AngularJS bound to my nested products and units. I'm also aware of ng-repeat-start and ng-repeat-end which so far I don't think will work?

Second, the example below first must repeat a TR for each product with a nested TDs for each unit.

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

what do you expect as a outcome from that directive? is the first part what you are looking for? — Poyraz Yilmaz, Mar 10 '14 at 20:21
I updated (Example 1) to show how I would like to it to repeat. — phanf, Mar 10 '14 at 21:00
Correct, my JSON has products, under each product I have multiple units. The unit count is dynamic and unknown until binding for each product. — phanf, Mar 10 '14 at 21:13
The follow code does work but it will not work when applying this to the follow jsfiddle, This do due to the tbody ng-repeat at its current place. example: http://jsfiddle.net/TroyAlford/SNKfd/ — phanf, Mar 10 '14 at 21:16

score 2 · Answer 1 · answered Mar 10 '14 at 20:19

2

ng-repeat repeats the element it is declared on. Try moving your ng-repeat's to the <tr>'s and <td>'s. If you want a separate table for each product, place the outer ng-repeat on the <table> element.

answered Mar 10 '14 at 20:19

apohl

1,913
27
30

I understand ng-repeat repeats the element I'm currently on. The issue I'm trying to resolve is to remove/move the **tbody ng-repeat**. – phanf Mar 10 '14 at 20:57
The following example shows how the final results should be. http://jsfiddle.net/TroyAlford/SNKfd/ Source of article: http://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers – phanf Mar 10 '14 at 21:04
Can you provide a jsfiddle with your code? Then we can go from there. – apohl Mar 11 '14 at 14:10

AngularJS ng-repeat tbody duplicated

1 Answers1