Come espandere una tabella per aggiungere ulteriori informazioni in uno stile di fisarmonica in AngularJS

Question

Ho avuto un sacco di problemi nel fare questo lavoro. Essenzialmente voglio essere in grado di fare clic su una riga sul mio tavolo per espandere quella riga e fornire ulteriori informazioni all'interno di esso. Voglio che sia uno stile di fisarmonica accartocciato (cassetti), così posso aprire più copie contemporaneamente. Il codice è sotto

<div class="row"> 
    <div class="col-md-11"> 
    <table class="table table-hover table-bordered"> 
     <thead> 
     <tr> 
      <th>S</th> 
      <th>R</th> 
      <th>Se</th> 
      <th>D</th> 
      <th>Ser</th> 
      <th>L</th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr ng-repeat="x in projects | filter:query | filter:quer | orderBy:orderProp"> 
      <td><b>{{x.a}}</b></td> 
      <td>{{x.b}}</td> 
      <td><u>{{x.c}}</u></td> 
      <td>{{x.d}}</td> 
      <td>{{x.e}}</td> 
      <td>{{x.f}}</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

Si forma un tavolo con sei colonne che si ciclo tra registrazioni e produrre molti tipi di informazioni. Voglio essere in grado di dare a queste righe la possibilità di espandersi e comprimere al clic.

http://plnkr.co/edit/CO7ZHudbfR9TZxGTQfGZ

Grazie.

Answer 1

È possibile utilizzare angolare-ui-bootstrap che fornisce una serie di direttive AngularJS sulla base di markup e CSS di Twitter Bootstrap, e scorrere i dati utilizzando ng-repeat su <accordion>.

<accordion-group ng-repeat="x in pro | orderBy:orderProp"> 
     <accordion-heading> 
     <div class="row"> 
      <div class="cell"><b>{{x.a}}</b></div> 
      <div class="cell">{{x.b}}</div> 
      <div class="cell"><u>{{x.c}}</u></div> 
      <div class="cell">{{x.d}}</div> 
      <div class="cell">{{x.e}}</div> 
      <div class="cell">{{x.f}}</div> 
     </div> 
     </accordion-heading> 

    <div> 
    Test Data 
    </div> 

    </accordion-group> 
</accordion> 

Inoltre, è possibile utilizzare i CSS per visualizzare i dati tabulari

.table{ 
    display: table; 
    width:100% 
} 
.row{ 
    display: table-row; 
} 
.cell{ 
    display: table-cell; 
    width:20% 
} 

Il vantaggio di utilizzare ui-bootstrap è, fornisce l'accesso a direttive nativi AngularJS senza alcuna dipendenza jQuery o di Bootstrap JavaScript.

Ecco la versione aggiornata di plunkr

Answer 2

Sembra che l'ho capito. Usando ng-click e un po 'di js puoi farlo abbastanza facilmente. Nel si aggiunge questo.

<tbody> 
     <tr ng-repeat-start="x in projects | filter:query | filter:quer | orderBy:orderProp"> 
      <td><a href="#" ng-click="isCollapsed = !isCollapsed"><b>{{x.a}}</b></a></td> 
      <td>{{x.b}}</td> 
      <td><u>{{x.c}}</u></td> 
      <td>{{x.d}}</td> 
      <td>{{x.e}}</td> 
      <td>{{x.f}}</td> 
     </tr> 
     <tr collapse="isCollapsed" ng-repeat-end=""> 
     <td colspan="3"> 
      <h3>Test</h3> 
      <p>Test</p> 
     </td> 
     </tr> 
     </tbody> 

È necessario ui-bootstrap, quindi aggiungilo agli script.

<script data-require="angular-bootstrap@0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script> 

E aggiungere questo alla tua javascript, l'aggiunta di essere 'ui.bootstrap'

var app = angular.module("myApp",['ui.bootstrap']); 

L'a href non è necessario, si mette in evidenza solo che è possibile fare clic su esso. Probabilmente è meglio farlo.

<td ng-click="isCollapsed = !isCollapsed"><b>{{x.a}}</b></td> 

In questo modo facendo clic sulla cella si attiverà l'espansione/collasso.