Ng-tekrar içinde gizli bölme-tıklamayı göster

Tıbbi prosedürlerin bir json dosyası aracılığıyla filtreleyen bir Angular.js uygulaması üzerinde çalışıyorum. Ng-tıklama kullanılarak prosedürün adına tıklandığında (aynı sayfada) her prosedürün ayrıntılarını göstermek istiyorum. .Procedure-details div öğesi görüntülenecek şekilde ayarlandığında şu ana kadar elde ettiğim şey bu: yok:

<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 konusunda oldukça yeniyim. Baska öneri?

Kaldır display:noneve ng-showyerine şunu kullan:

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

İşte keman: http://jsfiddle.net/asmKj/

ng-classBir sınıfı değiştirmek için de kullanabilirsiniz :

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

Bunu daha çok seviyorum, çünkü bazı güzel geçişler yapmanıza izin veriyor: http://jsfiddle.net/asmKj/1/

İşleyicideki ng-showbir showkapsam değişkeninin değerini kullanın ve değiştirin ng-click.

İşte çalışan bir örnek: 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>