Afficher la div cachée sur ng-click dans ng-repeat

Question

Je travaille sur une application Angular.js qui filtre un fichier json de procédures médicales. J'aimerais afficher les détails de chaque procédure lorsque le nom de la procédure est cliqué (sur la même page) en utilisant ng-click. Voici ce que j'ai fait jusqu'à présent, avec le div .procedure-details réglé sur display: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>

Je suis assez novice en matière d'angular. Des suggestions ?

Answer 1

Retirer le display:none et utiliser ng-show à la place :

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

Voici le violon : http://jsfiddle.net/asmKj/

---

Vous pouvez également utiliser ng-class pour faire basculer une classe :

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

Je préfère cela, car cela permet de faire de belles transitions : http://jsfiddle.net/asmKj/1/

Answer 2

Utilisez ng-show et de basculer la valeur d'un show dans la variable de portée ng-click manipulateur.

Voici un exemple concret : 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>