Hi finally I rendered my table and made it scrollable. but now new
requirements arrived. thead should be fixed.
In order to achieve that I gave the tbody element a fixed height and made
the overlow scroll.
the problem along with the rendering of my table is that I produce
multiple tbody elements
Here is my source:
<div ng:controller="controller" class="gridTableContainer">
<div ng:model="list" ng:repeat="portfolio in list">
<!--<h1>{{portfolio.Name}}</h1>-->
<table class="gridTable table table-bordered">
<thead>
<tr class="tblTitle">
<th align="left"
class="gridTableHeadElement">
<p
ng-click="SortByStringField('InstrumentName')">Name<i class="sort"></i></p>
<p
ng-click="SortByStringField('ISIN')">ISIN<i class="sort"></i></p>
</th>
<th align="center"
class="gridTableHeadElement">
<p
ng-click="SortByNumberField('Size')">Size<i class="sort"></i></p>
</th>
<th align="right"
class="gridTableHeadElement">
<p
ng-click="SortByNumberField('CurrentQuote')">akt. Kurs<i class="sort"></i></p>
<p
ng-click="SortByNumberField('CurrentWorth')">akt. Wert<i class="sort"></i></p>
</th>
<th align="right"
class="gridTableHeadElement">
<p>Kaufpreis</p>
</th>
<th align="right"
class="gridTableHeadElement">
<p>+/- heute</p>
<p>% heute</p>
<p>Wertentw. heute</p>
</th>
<th align="right"
class="gridTableHeadElement">
<p>+/- gesamt</p>
<p>% gesamt</p>
<p>Wertentw. gesamt</i></p>
</th>
<th align="center"
class="gridTableHeadElement">
<p>Optionen</p>
</th>
<th align="center"
class="gridTableHeadElement">
<p>Handeln</p>
</th>
</tr>
</thead>
<tbody ng:model="list" ng:repeat="component in
portfolio.Components">
<tr class="gridIndiceSection">
<td align="left"
class="gridTableBodyElement">
<p
class="boldText">{{component.InstrumentName}}</p>
<p>{{component.ISIN}}</p>
</td>
<td align="center"
class="gridTableBodyElement">
<p>{{component.Size}}</p>
</td>
<td align="right"
class="gridTableBodyElement">
<p>{{component.CurrentQuote}}</p>
<p>{{component.CurrentWorth}}</p>
</td>
<td align="right"
class="gridTableBodyElement">
<p>{{component.BuyingQuote}}</p>
<p>{{component.BuyingWorth}}</p>
<p>{{component.BuyingDate}}</p>
</td>
<td align="right"
class="gridTableBodyElement">
<p
class="greenText">{{component.ChangeTodayAbsolute}}</p>
<p
class="greenText">{{component.ChangeTodayRelative}}</p>
<p
class="greenText">{{component.ChangeTodayAbsolutePerformance}}</p>
</td>
<td align="right"
class="gridTableBodyElement">
<p
class="greenText">{{component.ChangeOverallAbsolute}}</p>
<p
class="greenText">{{component.ChangeOverallRelative}}</p>
<p
class="greenText">{{component.ChangeOverallAbsolutePerformance}}</p>
</td>
<td align="center"
class="gridTableBodyElement action">
<button class="gridItemOptions"
title="Optionen"></button>
</td>
<td align="center" valign="center"
class="gridTableBodyElement action">
<button class="gridBuy"
title="Kaufen">K</button>
<button class="gridSell"
title="Verkaufen">V</button>
</td>
</tr>
<tr class="gridGroupingHeader">
<td colspan="8">verteilt auf:</td>
</tr>
<tr class="gridGroupings" ng:model="list"
ng:repeat="constituent in component.Constituents">
<td align="left"
class="gridTableGroupingBodyElement">
<p class="boldText">Börse:
{{constituent.ExchangeID}}</p>
<p>{{constituent.ISIN}}</p>
</td>
<td align="center"
class="gridTableBodyElement">
<p>{{constituent.Size}} x</p>
</td>
<td align="right"
class="gridTableBodyElement">
<p>{{constituent.CurrentQuote}}</p>
<p>{{constituent.CurrentWorth}}</p>
</td>
<td align="right"
class="gridTableBodyElement">
<p>{{constituent.BuyingQuote}}</p>
<p>{{constituent.BuyingWorth}}</p>
<p>{{constituent.BuyingDate}}</p>
</td>
<td align="right"
class="gridTableBodyElement">
<p
class="greenText">{{constituent.ChangeTodayAbsolute}}</p>
<p
class="redText">{{constituent.ChangeTodayRelative}}</p>
<p
class="greenText">{{constituent.ChangeTodayAbsolutePerformance}}</p>
</td>
<td align="right"
class="gridTableBodyElement">
<p
class="redText">{{constituent.ChangeOverallAbsolute}}</p>
<p
class="redText">{{constituent.ChangeOverallRelative}}</p>
<p
class="greenText">{{constituent.ChangeOverallAbsolutePerformance}}</p>
</td>
<td align="center"
class="gridTableBodyElement action">
<button class="gridItemOptions"
title="Optionen"></button>
</td>
<td align="center" valign="center"
class="gridTableBodyElement action">
<button class="gridBuy"
title="Kaufen">K</button>
<button class="gridSell"
title="Verkaufen">V</button>
</td>
</tr>
</tbody>
</table>
</div></div>
how can I avoid the multiple tbody elements?
Thx for all the efforts
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
