angularjs ng-repeat and create two tr

Question

Im creating a toggable element. Im in need to create two tr`s for each ng-repeat.

i want the result below, when clicking the first tr, then it will show the second.

How can i create two tr-`s for each ng-repeat without making multiple tables?

// repeat start 
   <tr class="rowlink" ng-repeat="i in vm.something" ng-click="show other">
                    <td><div >some info here</div></td>
                    <td><div >info</div></td>

                    <td><div >something here  </div></td>
                    <td><div >49</div></td>
                </tr>
                <tr class="my toggable element">
                    <td colspan="4>
                        <div>some info from the ng-repeat here too.
                        </div>
                    </td>
                </tr>
// first repeat done

EDIT: i could make ng-repeat in the tbody, but then i get multiple tbodys, and i dont want that neither :|

Answer 1

Something Like this

<table>
  <tr ng-repeat-start="item in items">
      <td>am there</td>
  </tr>
  <tr ng-repeat-end>
      <td>am there too</td>
  </tr>
</table>

Here is the example

Answer 2

Use an HTML5 parent, like tbody , and use the ng-repeat over it:

<tbody class="rowlink" ng-repeat="i in vm.something" ng-click="show other">
   <tr>
       <td>some info here</td>
   </tr>
   <tr>
       <td>some other info here</td>
   </tr>
</tbody>

This way, you'll end with two tr for each iteration of ng-repeat.

Edit

OP has asked to not use multiple tbody, so this isn't the answer he wanted. Nevertheless, this should be useful anyway to someone who has not those needings.