web-dev-qa-db-fra.com

Afficher la division cachée sur ng-click dans ng-repeat

Je travaille sur une application Angular.js qui filtre à travers un fichier json de procédures médicales. Je voudrais montrer 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 eu jusqu’à présent, avec le fichier div .procedure-details configuré pour afficher: aucun:

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

angularjsangularjs-ng-repeat
99
Sara

Supprimez le display:none et utilisez ng-show à la place:

<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-class pour changer de classe:

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

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

156
Joseph Silber

Utilisez ng-show et modifiez la valeur d'une variable show scope dans le gestionnaire ng-click.

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>
28
Matt York