angularJS add table row (TR) inside an ng-repeat -

Problem

EDIT this is a similar (or duplicate) of Angular.js ng-repeat across multiple elements

-

i have a table, whose rows are generated via ng-repeat:

<tr ng-repeat="(key, value) in rows"> 
    <td>{{a}}</td>
    <td>{{b}}</td>
</tr>

i'd really prefer to keep it in <table> tag, and not several inline-blocks, for various reasons.

How can I add another row just below each row, e.g. pseudo-code

[ somehow-repeat ng-repeat="(key, value) in rows"]
    <tr class="1"> 
        <td>{{a}}</td>
        <td>{{b}}</td>
    </tr>

    <tr class="1"> 
        <td colspan="2">
    </tr>
[ /somehow-repeat ]

as far as i know (worth checking) i can't wrap the TR inside another element. just chekced :( the table doesn't show if i the "somehow-repeat" element is or

so - is there a way to add new row despite being in ng-repeat?

Problem courtesy of: Berry Tsakala

Solution

You can use repeat-start and repeat-end:

<tr class="1" ng-repeat-start="(key, value) in rows"> 
    <td>{{a}}</td>
    <td>{{b}}</td>
</tr>

<tr class="1" ng-repeat-end> 
    <td colspan="2">
</tr>
Solution courtesy of: Ye Liu

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.