Pokaż Ukryty div na ng-kliknij w NG-powtórz
Pracuję nad kanciastym.aplikacja js, która filtruje przez plik JSON procedur medycznych. Chciałbym pokazać szczegóły każdej procedury po kliknięciu nazwy procedury (na tej samej stronie) za pomocą ng-click. To jest to, co mam do tej pory, z .procedure-details div set to 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>
Jestem całkiem nowy w angular. Jakieś sugestie? 96
2 answers
Usuń display:none
, a zamiast tego użyj 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>
Oto skrzypce: http://jsfiddle.net/asmKj/
Możesz również użyć ng-class
, Aby przełączyć klasę:
<div class="procedure-details" ng-class="{ 'hidden': ! showDetails }">
Podoba mi się to bardziej, ponieważ pozwala zrobić kilka ładnych przejść: http://jsfiddle.net/asmKj/1/
154
Author: Joseph Silber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-21 03:50:22
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-21 03:50:22
Użyj ng-show
i przełącz wartość zmiennej scope show
w funkcji obsługi ng-click
.
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>
28
Author: Matt York,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-21 01:44:34
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-21 01:44:34