Muszę użyć ng-repeat
(w AngularJS), aby wyświetlić wszystkie elementy w tablicy.
Trudność polega na tym, że każdy element tablicy przekształci się w jeden, dwa lub trzy wiersze tabeli.
Nie mogę utworzyć prawidłowego kodu HTML, jeśli ng-repeat
jest używany w elemencie, ponieważ żaden typ powtarzającego się elementu nie jest dozwolony między <tbody>
a <tr>
.
Na przykład, gdybym użył ng-repeat on <span>
, dostałbym:
<table>
<tbody>
<span>
<tr>...</tr>
</span>
<span>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</span>
<span>
<tr>...</tr>
<tr>...</tr>
</span>
</tbody>
</table>
Który jest nieprawidłowym html.
Ale to, czego potrzebuję, to:
<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
gdzie pierwszy wiersz został wygenerowany przez pierwszy element tablicy, następne trzy przez drugi, a piąty i szósty przez ostatni element tablicy.
Jak mogę użyć ng-repeat w taki sposób, aby element html, z którym jest powiązany, „znikał” podczas renderowania?
Czy jest na to inne rozwiązanie?
Wyjaśnienie: Wygenerowana struktura powinna wyglądać jak poniżej. Każdy element tablicy może generować 1-3 wiersze tabeli. W idealnym przypadku odpowiedź powinna obsługiwać od 0 do n wierszy na element tablicy.
<table>
<tbody>
<!-- array element 0 -->
<tr>
<td>One row item</td>
</tr>
<!-- array element 1 -->
<tr>
<td>Three row item</td>
</tr>
<tr>
<td>Some product details</td>
</tr>
<tr>
<td>Customer ratings</td>
</tr>
<!-- array element 2 -->
<tr>
<td>Two row item</td>
</tr>
<tr>
<td>Full description</td>
</tr>
</tbody>
</table>
tr
, dostałbym jeden wiersz na element tablicy, o ile rozumiem.
tr
które są generowane przez jeden element tablicy, nie mają takiej samej struktury.