menu with the selected option of another color in angularjs

Question

menu with the selected option of another color in angularjs

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

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

where"Start", "Profile" and "Users" are the options and I'm on the start screen in that case.

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

(I made a <ul ng-model="classe"> + <a ng-class="classe"></a> but did not 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 was able to resolve using

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

no controller and menu

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

html angularjs css

asked by anonymous 18.11.2015 / 20:52

2 answers

How do I add a PayPal button on a page where prices may vary? How to create an insert trigger

score 2 · Answer 1

As you intend to do this in the menu, there are more 'practical' ways to get this result. If you are using the ui-router, can read more about it here , simply insert a line 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>

In this way, the class will automatically be applied to that menu when it is on the 'Home' page.

To use ng-class in isolation mode, you can do this 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, as I noticed that you are using the navigation with #.

Any questions, just question.

score 0 · Answer 2

The ng-class should 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 my code the li gets the active class only when the geral.navID variable is equal to home .

You'll also need a control variable exactly to keep the ativo state of the menu. Then in each page exchange you update the value of it to the current page.