1

Eu preciso mudar o estilo de um elemento quando clicado e se clicar de novo ele volta pra cor que tava (como se fosse uma "busca avançada"). Eu tenho o seguinte código:

<a href="" class="corCinza" ng-click="exibirForm = !exibirForm">...</a>
<div class="filtro" ng-show="exibirForm">
    <form ... /> 
</>

Quando eu clicar no <a> ele tem que ficar com corAzul e abrir a div com o form. Se eu clicar de novo ele fecha a div do form e volta a corCinza. O form já está funcionando, mas eu não consegui mudar a cor. Tentei usar o ng-class como num "tutorial" mas não funcionou. Alguém pode me ajudar? P.S.: Eu só "programo" html e css. O máximo que codei foi um helloWorld simples em JS.

1 Resposta 1

1

Você pode usar o ng-class que trabalha com condição, alterando a classe do elemento. Exemplo:

<a href="" class="corCinza" ng-class="{'corAzul': !exibirForm}" ng-click="exibirForm = !exibirForm">

Quando exibirForm for false, a classe corAzul será adicionada.

Você também pode utilizar com mais de uma definição de classe, caso queira remover a classe existente, por exemplo:

<a href="" ng-class="{'corCinza': exibirForm, 'corAzul': !exibirForm}" ng-click="exibirForm = !exibirForm">

Deste modo ele só exibe uma classe por vez.

4
  • Nossa @CelsomTrindade, eu estava pensando em soluções "mais complexas". Isso funcionou muito bem. Obrigada!
    – trofonia
    29/01/2016 às 10:02
  • Não por isso ;) Apenas lembre-se: classe definida dentro de class="" é estática, não pode ser removida através do ng-class. Classe definida dentro do ng-class="" somente será adicionada ao class="" se a condição conferir. 29/01/2016 às 10:06
  • Ook!! Mais uma vez obrigada! :D
    – trofonia
    1/02/2016 às 10:26
  • @trofonia se resolveu o problema, não esqueça de marcar a resposta como aceita =D 1/02/2016 às 14:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .