Menu
I am having an issue i need to repeat the following.. as a group
<tr></tr>
<tr></tr>
I can't surround them with a DIV on put the ng-repeat on there as its invalid for TR i.e.
<div ng-repeat="item in items">
<tr></tr>
<tr></tr>
</div>
so i currently have the following implemented
<tr ng-repeat.....></tr>
<tr ng-repeat.....></tr>
but the problem is with this there is a collection of 6 items so the first TR renders 6 times and then 6 times for next ...
I am scratching my head trying to get around this but I just can't figure it out.
It would be nice if there was some sort of Div tag that was used for ng-repeat but didn't render an element to the DOM ??
985
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat.
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object.
NEST TWO ng-repeatThe first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection. By using one ng-repeat for the row and an other for the column, the rows and the columns of your table is now driven by a subset.
It looks like the angularjs guys have implemented something along these lines. https://github.com/angular/angular.js/commit/e46100f7097d9a8f174bdb9e15d4c6098395c3f2
So the syntax would be
<tr ng-repeat-start="item in items"></tr>
<tr ng-repeat-end></tr>
You can put the ng-repeat on a tbody element :
<tbody ng-repeat="item in items">
<tr>
<td>{{item.row_one_stuff}}</td>
<td>{{item.more_row_one_stuff}}</td>
</tr>
<tr>
<td>{{item.row_two_stuff}}</td>
<td>{{item.more_row_two_stuff}}</td>
</tr>
</tbody>
<tr ng-repeat-start="item in items">
<td>{{item.data1}}</td>
</tr>
<tr ng-repeat-end>
<td>{{item.data2}}</td>
</tr>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
