menu with the selected option of another color in Angularjs

Question

my first question and my first "real" project as well. I am using bootstrap, html/css and angular and have a horizontal menu in an unordered list. What I need to do is that this menu has another color on the option I click, but it didn’t work using ng-class. It needs to look like this:

where "Home", "Profile" and "Users" are the options and I’m on the start screen in this case.

My code is like this (still incomplete): and I don’t know what to use from the angular to do this.

(I made a <ul ng-model="classe">+ <a ng-class="classe"></a> but it didn’t work)

<div class="menu-superior">
    <ul class="nav">
        <li><a href="#inicio">Início</a></li>
        <li><a href="#2">Perfil</a></li>
        <li><a href="#buscar_usuario">Usuários</a></li>            
    </ul>
</div>

---

I managed to solve using

$scope.getClass = function (path) {
        if ($location.path().substr(0, path.length) === path) {
            return 'active';
        } else {
            return '';
        }
    };

in the controller and menu

<li><a ng-class="getClass('/buscar_usuario')" href="#buscar_usuario">...</a></li>

Answer 1

As you intend to do this in the menu, there are more 'practical' ways to get this result. If you are using ui-router, can read more about it here, just insert a row with the following expression ui-sref-active="nomedaclasse". In your case, it would look something like this:

<li><a ui-sref="inicio" ui-sref-active="active">Início</a></li>

This way, the class will be automatically applied in that menu when it is on the 'Home' page'.

To use ng-class in isolation, you can do it as follows:

<li ng-class="{'active': menu == inicio}">Link</li> //Aplica a classe se o menu for igual a 'inicio'

<li ng-class="{'active': meuValor}">Link</li> //Aplica a classe se 'meuValor' for true

<li ng-class="{'active': !meuValor}">Link</li> //Aplica a classe se 'meuValor' for false

<li ng-class="{'active': meuValor && !outroValor}">Link</li> //Aplica a classe se 'meuValor' for true e 'outroValor' for false

<li ng-class="{'active': meuValor, 'disable':!outroValor}">Link</li> //Aplica a classe 'active' se 'meuValor' for true; aplica classe "disable" se 'outroValor' for false

As you are starting, I recommend that you also take a look at the ui-router, because I noticed that you are using the navigation with #.

Any doubt, just question.

Answer 2

The ng-class shall be used with the name of a class and an expression:

<ANY class="ng-class: expressao;"> ... </ANY>

An example of my code:

<li ng-class="{active : geral.navID == 'home'}"><a href="#/home">Home</a></li>

In that code of mine li gets the class active only when the variable geral.navID is equal to home.

You will also need a control variable exactly to maintain the state of ativo menu. Ai on each page exchange you update its value to the current page.