CODEWITHSUNDEEP
javascriptcssangularjsangularjs-ng-repeat
phanf
phanf

Reputation: 821

AngularJS ng-repeat tbody duplicated

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>

Upvotes: 2

Views: 3823

Answers (1)

apohl
apohl

Reputation: 1923

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.

Upvotes: 2

Related Questions