Versteckte div auf ng-klicken innerhalb ng-repeat

Question

Ich arbeite an einer Angular.js App, die durch eine JSON-Datei von medizinischen Verfahren filtert. Ich möchte die Details jeder Prozedur anzeigen, wenn der Name der Prozedur (auf derselben Seite) mit ng-click angeklickt wird. Das ist, was ich habe bisher mit den .Verfahren-Details Display eingestellt Div,: none:

<ul class="procedures"> 
    <li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp"> 
     <h4><a href="#" ng-click="?">{{procedure.definition}}</a></h4> 
     <div class="procedure-details"> 
      <p>Number of patient discharges: {{procedure.discharges}}</p> 
      <p>Average amount covered by Medicare: {{procedure.covered}}</p> 
      <p>Average total payments: {{procedure.payments}}</p> 
     </div> 
    </li> 
</ul> 

Ich bin ziemlich neu in Winkel. Irgendwelche Vorschläge?

Answer 1

Entfernen Sie die display:none, und verwenden Sie ng-show statt:

<ul class="procedures"> 
    <li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp"> 
     <h4><a href="#" ng-click="showDetails = ! showDetails">{{procedure.definition}}</a></h4> 
     <div class="procedure-details" ng-show="showDetails"> 
      <p>Number of patient discharges: {{procedure.discharges}}</p> 
      <p>Average amount covered by Medicare: {{procedure.covered}}</p> 
      <p>Average total payments: {{procedure.payments}}</p> 
     </div> 
    </li> 
</ul> 

Hier ist die Geige:

<div class="procedure-details" ng-class="{ 'hidden': ! showDetails }"> 

I: http://jsfiddle.net/asmKj/

---

Sie auch ng-class umschalten eine Klasse verwenden können, so mehr, seit es allo ws Sie ein paar schöne Übergänge zu tun: http://jsfiddle.net/asmKj/1/

Answer 2

Verwenden ng-show und schalten Sie den Wert eines show Umfang Variable in der ng-click Handler.

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/pvtpenguin/wD7gR/1/

<ul class="procedures"> 
    <li ng-repeat="procedure in procedures"> 
     <h4><a href="#" ng-click="show = !show">{{procedure.definition}}</a></h4> 
     <div class="procedure-details" ng-show="show"> 
      <p>Number of patient discharges: {{procedure.discharges}}</p> 
      <p>Average amount covered by Medicare: {{procedure.covered}}</p> 
      <p>Average total payments: {{procedure.payments}}</p> 
     </div> 
    </li> 
</ul>