Comment utiliser ng-repeat sans élément HTML

Question

J'ai besoin d'utiliser ng-repeat (AngularJS) la liste de tous les éléments dans un tableau.

La complication est que chaque élément de la matrice de transformation pour une, deux ou trois lignes d'une table.

Je ne peux pas créer un code html valide, si ng-repeat est utilisé sur un élément, comme aucun type d'élément répété est autorisé entre <tbody> et <tr>.

Par exemple, si j'ai utilisé ng-repeat sur <span>,, je voudrais obtenir:

<table>
  <tbody>
    <span>
      <tr>...</tr>
    </span>
    <span>
      <tr>...</tr>
      <tr>...</tr>
      <tr>...</tr>
    </span>
    <span>
      <tr>...</tr>
      <tr>...</tr>
    </span>
  </tbody>
</table>          

Ce qui n'est pas valide html.

Mais ce dont j'ai besoin pour être généré est:

<table>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>          

où la première ligne a été généré par le premier élément du tableau, les trois prochaines par la deuxième et la cinquième et la sixième par le dernier élément du tableau.

Comment puis-je utiliser ng-repeat de telle manière que l'élément html à laquelle il est lié "disparaît" au cours de rendu?

Ou est-il une autre solution?

---

Clarification: La structure générée devrait ressembler à ci-dessous. Chaque élément du tableau peut générer entre 1 et 3 lignes de la table. La réponse devrait idéalement soutien de 0 à n lignes par l'élément de tableau.

<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>          

Answer 1

À partir de 1,2 AngularJS il existe une directive appelée `` qui fait exactement ce que vous demandez. Voir ma réponse à cette question pour obtenir une description de comment l’utiliser.

Answer 2

Mise à jour : Si vous utilisez angulaire 1.2 +, utilisez ng-répéter-start. Voir la réponse de @jmagnusson.

Sinon, que diriez-vous de mettre la ng-répétition sur tbody ? (Autant que je sache, c’est OK d’avoir plusieurs s dans un seul tableau.)

Answer 3

Vous pouvez aplatir les données au sein de votre contrôleur :

Et puis dans le code HTML :

Answer 4

vous pouvez utiliser le caractère de soulignement aplatir la fonction``

Answer 5

<pre><code></code><p>Je pense que c’est valide  :)</p></pre>