Chcę przesunąć dodatkowy wiersz w wierszu w tabeli, gdy klient kliknie wiersz. Dane nie powinny być wstępnie pobierane, ponieważ oczekuję, że będzie ich co najwyżej 30 wierszy, ale w każdym wierszu są powiązane dane, których pobranie byłoby nieuzasadnione.

Moje podejście do tej pory polega na użyciu ng-repeat do iteracji mojej kolekcji i renderowania tabeli. Gdy klient naciśnie wiersz, klient oczekuje, że szczegóły dotyczące wiersza zostaną wyświetlone w linii jako dodatkowy wiersz pod naciśniętym rzędem.

<tr ng-repeat="court in courts">            
  <td>{{court.name}}</td>
  <td>{{court.number}}</td>
  <td>{{court.nrOfPlayers}}</td>
  <td>
    <a href ng:click="toggle(court.number)">Details</a>  <!-- click toggles extra row with data loaded async -->
  </td>
</tr>
<!-- extra row here -->

Udało mi się pokazać szczegóły pod stołem z ng-show w hacky sposób, ale to nie jest to, czego chcę.

Jak to osiągnąć za pomocą angular.js? Jaki jest kanciasty sposób, aby to zrobić?

Oto skrzypce na przykładzie głupiego kortu do squashahttp://jsfiddle.net/HByEv/