แสดง 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>

ฉันค่อนข้างใหม่ที่เชิงมุม ข้อเสนอแนะใด ๆ ?

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