change classes with Angularjs

Question

I need to change the style of an element when clicked and if you click again it goes back to the color it was (as if it were an "advanced search"). I have the following code:

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

When I click on <a> it has to stay with corazul and open the div with the form. If I click again it closes the div of the form and returns to corCinza. The form is already working, but I could not change the color. I tried to use ng-class as a "tutorial" but it didn’t work. Can someone help me? P.S.: I just "program" html and css. The most I coded was a simple helloWorld in JS.

Answer 1

You can use the ng-class working with condition, changing the element class. Example:

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

When exibirForm for false, the class corAzul will be added.

You can also use with more than one class definition if you want to remove the existing class, for example:

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

This way it only displays one class at a time.