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
Post a Comment