Mostrar div oculto no ng-click dentro do ng-repeat


100

Estou trabalhando em um aplicativo Angular.js que filtra um arquivo json de procedimentos médicos. Eu gostaria de mostrar os detalhes de cada procedimento quando o nome do procedimento é clicado (na mesma página) usando ng-click. Isso é o que eu tenho até agora, com o div .procedure-details definido para exibir: nenhum:

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

Eu sou muito novo em angular. Alguma sugestão?


3
Além disso, você realmente não precisa de um href = "#" no elemento a.
Foo L de

2
Sim, se quiser passar em um validador HTML.
Danny Bullis

Respostas:


158

Remova o display:nonee use em seu ng-showlugar:

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

Aqui está o violino: http://jsfiddle.net/asmKj/


Você também pode usar ng-classpara alternar uma classe:

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

Eu gosto mais disso, pois permite que você faça algumas transições interessantes: http://jsfiddle.net/asmKj/1/


3
Como ocultar o primeiro div quando clico no segundo div.
Usuário123

Para responder à pergunta acima ... Basta alterar a classe ng para oculta em true .... ng-class = "{'hidden': showDetails}"
Chris Lambrou

28

Use ng-showe alterne o valor de uma showvariável de escopo no ng-clickmanipulador.

Aqui está um exemplo prático : 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
Como ocultar o primeiro div quando clico no segundo div.
Usuário123

Isso me intriga ... como essa variável de "escopo" funciona? Quando tento, estão todos escondidos !?
Nico
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.