Afficher le div caché sur ng-clic dans ng-répéter


100

Je travaille sur une application Angular.js qui filtre à travers un fichier json de procédures médicales. Je voudrais afficher les détails de chaque procédure lorsque le nom de la procédure est cliqué (sur la même page) en utilisant ng-click. C'est ce que j'ai jusqu'à présent, avec le div .procedure-details réglé sur 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>

Je suis assez nouveau chez angular. Aucune suggestion?


3
De plus, vous n'avez vraiment pas besoin d'un href = "#" dans l'élément a.
Foo L

2
Vous le faites si vous souhaitez passer un validateur HTML.
Danny Bullis

Réponses:


158

Supprimez le display:noneet utilisez à la ng-showplace:

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

Voici le violon: http://jsfiddle.net/asmKj/


Vous pouvez également utiliser ng-classpour basculer une classe:

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

J'aime plus cela, car cela vous permet de faire de belles transitions: http://jsfiddle.net/asmKj/1/


3
Comment masquer le premier div lorsque je clique sur le deuxième div.
User123

Pour répondre à la question ci-dessus ... Il suffit de changer la classe ng en caché sur true .... ng-class = "{'hidden': showDetails}"
Chris Lambrou

28

Utilisez ng-showet basculez la valeur d'une showvariable d'étendue dans le ng-clickgestionnaire.

Voici un exemple de travail: 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
Comment masquer le premier div lorsque je clique sur le deuxième div.
User123

Cela me laisse perplexe ... comment fonctionne cette variable "scope"? Quand je l'essaye, tout est caché !?
Nico
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.