Nested ng-repeat tbody different list

Question

My code is something like this:

<tbody ng-repeat="item in ctrl.list">
  <tr>
    <td style="vertical-align: middle">{{item.numerodoc}}<br>
    </td>
    <td style="vertical-align: middle">{{item.sgmittragsoc}}<br>
    </td>
  </tr>
  <tr ng-if="toggle[$index]" ng-repeat="detail in ctrl.details">
     <td style="vertical-align: middle">{{detail.sgmittragsoc}}<br>
     </td>
     <td style="vertical-align: middle">{{detail.sgdestragsoc}}<br>
     </td>
  </tr>
</tbody>

The first part is working (I'm able to repeat every item in the list), the second part is not working (I'm unable to repeat every item on the details list). That tr will activate only when I click a button and the details list will change. What should I do to make it work? I cannot use a div inside the tbody and I even tried the ng-repeat-start but I was not able to understand where to put the ng-repeat-end since I only have a tr to repeat.

Answer 1

In regards to the ng-repeat-start / -end structure. I am unable to test this as I am missing most of you code, but the start/end works like this. Also, you want to place the ng-repeat on <tr> because you do not want to repeat the whole table.

<tbody>
  <tr ng-repeat-start="item in ctrl.list">
    <td style="vertical-align: middle">{{item.numerodoc}}<br>
    </td>
    <td style="vertical-align: middle">{{item.sgmittragsoc}}<br>
    </td>
  </tr>
  <tr ng-repeat-end>
     <td style="vertical-align: middle">{{detail.sgmittragsoc}}<br>
     </td>
     <td style="vertical-align: middle">{{detail.sgdestragsoc}}<br>
     </td>
  </tr>
</tbody>

Also, how is the structure of your arrays? Are the lists and details in the same scope? It really depends. Give me some more details and I might be able to help!