Tampilkan div tersembunyi saat ng-click dalam ng-repeat

100

Saya sedang mengerjakan aplikasi Angular.js yang memfilter melalui file json prosedur medis. Saya ingin menunjukkan detail setiap prosedur ketika nama prosedur diklik (pada halaman yang sama) menggunakan ng-click. Inilah yang saya miliki sejauh ini, dengan div .procedure-details disetel ke display: 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>

Saya cukup baru di sudut. Ada saran?

Sara
sumber
3
Juga, Anda benar-benar tidak membutuhkan href = "#" di elemen.
Foo L
2
Anda lakukan jika ingin meneruskan validator HTML.
Danny Bullis

Jawaban:

158

Hapus display:none, dan gunakan ng-showsebagai gantinya:

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

Ini biolanya: http://jsfiddle.net/asmKj/


Anda juga dapat menggunakan ng-classuntuk beralih kelas:

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

Saya lebih suka ini, karena ini memungkinkan Anda melakukan beberapa transisi yang bagus: http://jsfiddle.net/asmKj/1/

Joseph Silber
sumber
3
Cara menyembunyikan div pertama saat saya mengklik div kedua.
Pengguna123
Untuk menjawab Q di atas ... Ubah saja ng-class menjadi hidden on true .... ng-class = "{'hidden': showDetails}"
Chris Lambrou
28

Gunakan ng-showdan ubah nilai showvariabel cakupan di ng-clickpenangan.

Berikut adalah contoh yang berfungsi: 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>
Matt York
sumber
4
Cara menyembunyikan div pertama saat saya mengklik div kedua.
Pengguna123
Ini membingungkan saya ... bagaimana cara kerja variabel "lingkup" ini? Saat aku mencobanya, semuanya tersembunyi !?
Nico