Hiển thị div ẩn khi ng-click trong ng-repeat

Tôi đang làm việc trên một ứng dụng Angular.js lọc qua một tệp json của các thủ tục y tế. Tôi muốn hiển thị chi tiết của từng thủ tục khi tên của thủ tục được nhấp (trên cùng một trang) bằng cách sử dụng ng-click. Đây là những gì tôi có cho đến nay, với div .procedure-details được đặt để hiển thị: 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>

Tôi khá mới ở góc cạnh. Bất kỳ đề xuất?

Loại bỏ display:nonevà sử dụng ng-showthay thế:

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

Đây là fiddle: http://jsfiddle.net/asmKj/

Bạn cũng có thể sử dụng ng-classđể chuyển đổi một lớp:

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

Tôi thích điều này hơn, vì nó cho phép bạn thực hiện một số chuyển đổi đẹp mắt: http://jsfiddle.net/asmKj/1/

Sử dụng ng-showvà chuyển đổi giá trị của một showbiến phạm vi trong ng-clicktrình xử lý.

Đây là một ví dụ hoạt động: 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>