webentwicklung-frage-antwort-db.com.de

Zeige verstecktes Div bei ng-Klick innerhalb von ng-repeat

Ich arbeite an einer Angular.js-App, die eine JSON-Datei mit medizinischen Eingriffen durchsucht. Ich möchte die Details jeder Prozedur anzeigen, wenn der Name der Prozedur mit ng-click (auf derselben Seite) angeklickt wird. Dies ist, was ich bis jetzt habe, mit dem .procedure-details div gesetzt, um anzuzeigen: 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>

Ich bin ziemlich neu im Winkel. Irgendwelche Vorschläge?

angularjsangularjs-ng-repeat
99
Sara

Entferne das display:none und benutze ng-show stattdessen:

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

Hier ist die Geige: http://jsfiddle.net/asmKj/

Sie können auch ng-class um eine Klasse umzuschalten:

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

Ich mag das mehr, da es Ihnen erlaubt, einige nette Übergänge zu machen: http://jsfiddle.net/asmKj/1/

156
Joseph Silber

Verwenden ng-show und schalte den Wert einer show Bereichsvariablen in der ng-click Handler.

Hier ist ein funktionierendes Beispiel: 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
Matt York