javascript - AngularJS ng-repeat tbody duplicated -


i'm trying create following table structure (example 1) angularjs , ng-repeat. requirement have tbody not repeated. data i'm working has structure of product.productunit. left table cell has rowspan=3 display image , follow right 3 cells display product units of image. entire table placed in fixed scrollable grid fixed header/footers using css: tbody {overflow-y: scroll}. unfortunately having multiple tbodys between each product breaks apart scrolling 1 table shown in (example 2) non-working.

update

my question how remove ng-repeat within tbody. people below voted question down due fact example shows ng-repeat tbody. i'm asking on how rewrite code render html correctly in (example 1). end result should allow me have table 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 angularjs bound nested products , units. i'm aware of ng-repeat-start , ng-repeat-end far don't think work?

second, example below first must repeat tr each product nested tds each unit.

example 2

<div class="scrollable-table-wrapper">      <table id="tablegrid">         <thead>             <tr>                 <th>product</th>                 <th>unit</th>             </tr>         </thead>          <!-- issue here tbody repeated each product -->         <tbody ng-repeat="product in productslist">             <tr ng-repeat="resproductunit in product.resproductunits">              <!-- place first cell rowspan 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> 

ng-repeat repeats element declared on. try moving ng-repeat's <tr>'s , <td>'s. if want separate table each product, place outer ng-repeat on <table> element.


Comments

Popular posts from this blog

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -