Pokaż ukryty element div po kliknięciu ng-click w ciągu ng-repeat

100

Pracuję nad aplikacją Angular.js, która filtruje pliki json z procedurami medycznymi. Chciałbym pokazać szczegóły każdej procedury po kliknięciu nazwy procedury (na tej samej stronie) za pomocą ng-click. To, co mam do tej pory, z divem .procedure-details ustawionym na wyświetlanie: 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>

Jestem całkiem nowy w kątowym. Jakieś sugestie?

Sara
źródło
3
Poza tym naprawdę nie potrzebujesz href = "#" w elemencie a.
Foo L
2
Robisz, jeśli chcesz przekazać walidator HTML.
Danny Bullis

Odpowiedzi:

158

Usuń display:nonei użyj ng-showzamiast tego:

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

Oto skrzypce: http://jsfiddle.net/asmKj/


Możesz także użyć, ng-classaby przełączyć zajęcia:

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

Bardziej mi się to podoba, ponieważ pozwala robić fajne przejścia: http://jsfiddle.net/asmKj/1/

Joseph Silber
źródło
3
Jak ukryć pierwszy element DIV po kliknięciu drugiego elementu DIV.
User123
Aby odpowiedzieć na powyższe pytanie ... Po prostu zmień klasę ng na ukrytą w true .... ng-class = "{'hidden': showDetails}"
Chris Lambrou
28

Użyj ng-showi przełącz wartość showzmiennej zasięgu w programie ng-clickobsługi.

Oto działający przykład: 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
źródło
4
Jak ukryć pierwszy element DIV po kliknięciu drugiego elementu DIV.
User123
To mnie zastanawia ... jak działa ta zmienna „zakres”? Kiedy próbuję, wszystko jest ukryte !?
Nico