Показати прихований div на ng-click в межах ng-repeat

Я працюю над програмою Angular.js, яка фільтрує json з медичних процедур. Я хотів би показати подробиці кожної процедури при натисканні на ім'я процедури (на одній сторінці) за допомогою ng-клацання. Це те, що я маю до цього часу, з розділеним для відображення розділом .processure-details: 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>

Я досить нова у кутовому. Будь-які пропозиції?

Видаліть display:noneі ng-showзамість цього скористайтеся :

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

Ось загадка: http://jsfiddle.net/asmKj/

Ви також можете використовувати ng-classдля перемикання класу:

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

Мені це більше подобається, оскільки це дозволяє робити хороші переходи: http://jsfiddle.net/asmKj/1/

Використовуйте ng-showта перемикайте значення showзмінної області на ng-clickобробці.

Ось робочий приклад: 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>