Показать скрытый div на ng-click внутри ng-repeat

Я работаю над приложением Angular.js, которое фильтрует через json файл медицинских процедур. Я хотел бы показать детали каждой процедуры при щелчке по имени процедуры (на той же странице) с помощью ng-click. Это то, что у меня до сих пор, с отображением div.procedure-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>

Я новичок в Angular. Любые предложения?

Ответы

Ответ 1

Удалите 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/

Ответ 2

Используйте 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>