10
votes

Angularjs - répétant la tru dans une table, mais ajoutant de manière dynamique plus de lignes tout en boucle

Etant donné que des exemples racontent toujours plus que des mots ici sont ce que je voudrais faire dans une autre langue xxx

de sorte que cela va boucler sur un ensemble d'éléments et montrer certaines propriétés de ces éléments. S'il y a un avertissement, une nouvelle ligne sera ajoutée sous la ligne actuelle dans laquelle l'avertissement sera affiché. Cependant, comment puis-je faire cela en angularjs? Si je mettais une répétition NG sur le TR, elle s'arrêtera à la première étiquette de fin de TR. J'ai lu sur certains autres threads que cela n'est pas très facilement fait, mais comment peut-on faire? Et oui, je veux vraiment utiliser une table. Voici mon exemple de force avec angularjs qui ne fonctionne évidemment pas comme je l'aimerais. Des pointeurs comment cela peut être fait?

EXEMPLE JSBIN avec TR-NG-REPEAT


0 commentaires

3 Réponses :


0
votes

Vous pouvez répéter sur le Tody CODE>

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


0 commentaires

12
votes

Une solution que je peux penser est d'avoir plusieurs balises code> TODO code> dans la même table. ici est une discussion sur l'utilisation de plusieurs Tody Code> Tags dans la même table.

Donc, pour votre problème, vous pouvez avoir la configuration suivante: P>

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


0 commentaires

20
votes

Actuellement (1.0.7 / 1.1.5) vous ne peut pas données de sortie en dehors de la répétition NG, < em> mais version 1.2 (voir la vidéo YouTube Angularjs 1.2 et au-delà à 17h30) apportera la syntaxe suivante (adaptée à votre exemple): xxx

L'idée est que tout ce qui est entre -start < / strong> et --end sera répété, y compris l'élément -end .


1 commentaires

En effet, j'attendrai 1,2 pour le faire de cette façon et jusqu'à ce qu'il utilise la répétition de la "solution". Merci pour les informations cependant