angulaire.js - Comment implémenter du contenu pliable dans Angularjs

Question

J'ai utilisé l'instruction ng-repeat d'Angularjs pour sortir une donnée du serveur. Le code est similaire à : <table>

.

      <thead>
         <tr>
           <th>itNo</th>
           <th>itVP</th>                                                      
           </tr>
           </thead>
          <tbody>
       <tr class="paginationclass" ng-repeat="item in lists| orderBy:'itNo'| filter:query">
        <td>{{item.itNo}}</td>
        <td>{{item.itVP}}</td>

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

Je souhaite que les données à l'intérieur soient pliées. Par exemple, si No est égal à 1, seule la première sera affichée. Cliquez ensuite sur le signe plus pour développer et voir le reste des informations. Comment faire cela et comment l'écrire ?

Answer 1

La première ligne affiche le 0ème élément du tableau par défaut et n'est pas placée dans ng-repeat. Ensuite, écrivez un tr et une boucle, en commençant par le premier du tableau et en bouclant jusqu'à la fin.
Ajoutez l'attribut ng-show à tr, initialisez l'expression à false et masquez-la par défaut. Lorsque vous cliquez sur le signe plus, l'expression est évaluée comme vraie et d'autres éléments à partir de la deuxième ligne sont affichés.

Answer 2

Il est préférable de définir le pliage en tant que composant via des instructions, qui peuvent mieux exploiter les opérations DOM, des composants réutilisables ou utiliser directement des composants définis dans l'interface utilisateur angulaire

Answer 3

Il y a des onglets dans ui-bootstrap, vous pouvez y jeter un œil