Mostrar div oculto en ng-click dentro de ng-repeat


100

Estoy trabajando en una aplicación Angular.js que filtra a través de un archivo json de procedimientos médicos. Me gustaría mostrar los detalles de cada procedimiento cuando se hace clic en el nombre del procedimiento (en la misma página) usando ng-click. Esto es lo que tengo hasta ahora, con el div .procedure-details configurado para mostrar: 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>

Soy bastante nuevo en angular. ¿Alguna sugerencia?


3
Además, realmente no necesita un href = "#" en el elemento a.
Foo L

2
Lo hace si quiere pasar un validador HTML.
Danny Bullis

Respuestas:


158

Quite el display:none, y use ng-showen su lugar:

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

Aquí está el violín: http://jsfiddle.net/asmKj/


También puede usar ng-classpara alternar una clase:

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

Me gusta más esto, ya que te permite hacer algunas buenas transiciones: http://jsfiddle.net/asmKj/1/


3
Cómo ocultar el primer div cuando hago clic en el segundo div.
User123

Para responder a la pregunta anterior ... Simplemente cambie la clase ng a hidden on true .... ng-class = "{'hidden': showDetails}"
Chris Lambrou

28

Use ng-showy alterne el valor de una showvariable de ámbito en el ng-clickcontrolador.

Aquí hay un ejemplo de trabajo: 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
Cómo ocultar el primer div cuando hago clic en el segundo div.
User123

Esto me desconcierta ... ¿cómo funciona esta variable de "alcance"? Cuando lo intento, ¿¡todo está oculto !?
Nico
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.