angularJS - Répétition de tr dans une table, mais ajout dynamique de plusieurs lignes en boucle

Depuis exemples de toujours dire plus que des mots voici ce que je voudrais faire dans une autre langue

<tr>
    <c:forEach items="${items}" var="item"> 
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <c:if test="${item.showWarning}">
         </tr><tr><td colspan="3">${item.warning}</td>
      </c:if>
</tr>

Ce sera une boucle sur un ensemble d'éléments et de montrer quelques propriétés de ces éléments. Si il y a un avertissement, une nouvelle ligne sera ajoutée en dessous de la ligne courante dans lequel le message d'avertissement sera affiché. Cependant, comment puis-je faire dans angularJs? Si j'ai mis un ng-repeat sur le tr, il s'arrête à la première balise de fin de tr. J'ai lu sur certains autres threads que ce n'est pas très facile à faire, mais comment peut-il être fait? Et oui, je veux vraiment utiliser un tableau. Voici mon exemple artificiel avec angularjs qui est de toute évidence ne fonctionne pas comme je le voudrais. Tous les pointeurs comment cela peut être fait?

JSBin exemple avec tr-ng-repeat

source d'informationauteur Ronald | 2013-07-19

  1. 11

    Une solution que je peux penser est le fait d'avoir plusieurs tbody les tags à l'intérieur d'une même table. Ici est une discussion sur l'utilisation de plusieurs tbody les tags à l'intérieur d'une même table.

    Donc, pour votre problème, vous pourriez avoir la configuration suivante:

    <table ng-controller="ItemController">
    <thead>
        <th>Name</th>
        <th>Description</th>
        <th>warning?</th>
    </thead>
    <tbody ng-repeat="item in items">
        <tr>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
            <td>{{item.warning}}</td>
        </tr>
        <tr ng-show="item.warning">
            <td colspan="3" style="text-align: center">Warning !!!</td>
        </tr>
    </tbody>
</table>

    Répétez le corps de table autant de fois qu'il y a des entrées pour la table et, en son sein de deux rangées - on d'afficher l'entrée de ligne et l'autre pour être affichée de manière conditionnelle.

  2. 20

    Actuellement (1.0.7/1.1.5) vous ne peut pas données de sortie à l'extérieur de la ng-repeat, mais version 1.2(voir la vidéo sur youtube AngularJS 1.2 et au-Delà à 17:30) apportera la syntaxe suivante(adaptée à votre exemple):

    <tr ng-repeat-start="item in items">
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
<tr ng-repeat-end ng-show="item.showWarning">
  <td colspan="3">{{item.warning}}</td>
</tr>

    L'idée est que tout ce qui est entre -début et la fin de l' sera répété, y compris la la fin de l' élément.

  3. 0

    Vous pouvez répéter au cours de la tbody

    <tbody ng-repeat="item in items">
  <tr>
   <td>{{item.name}}</td>
   <td>{{item.description}}</td>
   <td>{{item.warning}}</td>
  </tr>
  <tr ng-show="item.warning">
    <td colspan="3">Warning !!!</td>
  </tr>
</tbody>

    Aussi, vous n'avez pas besoin d'envelopper le ng-show expression dans {{}}vous pouvez simplement utiliser item.warning