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?


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/


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>

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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.