Mostra div nascosto su ng-click all'interno di ng-repeat

Sto lavorando a un'app Angular.js che filtra attraverso un file json di procedure mediche. Vorrei mostrare i dettagli di ciascuna procedura quando si fa clic sul nome della procedura (sulla stessa pagina) utilizzando ng-click. Questo è quello che ho finora, con il div .procedure-details impostato per visualizzare: nessuno:

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

Sono abbastanza nuovo in Angular. Eventuali suggerimenti?

Rimuovi il display:none, e usa ng-showinvece:

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

Ecco il violino: http://jsfiddle.net/asmKj/

Puoi anche usare ng-classper attivare / disattivare una classe:

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

Questo mi piace di più, dato che ti permette di fare delle belle transizioni: http://jsfiddle.net/asmKj/1/

Usa ng-showe alterna il valore di una showvariabile di ambito nel ng-clickgestore.

Ecco un esempio funzionante: 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>