0

minha primeira pergunta e meu primeiro projeto "de verdade" também. Estou usando bootstrap, html/css e angular e tenho um menu horizontal em lista não ordenada. O que eu preciso fazer é com que esse menu tenha outra cor na opção que eu clicar, mas não deu certo usando o ng-class. Ele precisa ficar assim:

inserir a descrição da imagem aqui

onde "Inicio", "Perfil" e "Usuários" são as opções e eu estou na tela de início nesse caso.

Meu código está assim (ainda incompleto): e eu não sei o que usar do angular pra fazer isso.

(Eu fiz um <ul ng-model="classe">+ <a ng-class="classe"></a> mas não funcionou)

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

Consegui resolver usando

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

no controller e no menu

<li><a ng-class="getClass('/buscar_usuario')" href="#buscar_usuario">...</a></li>
1
  • atualizei minha resposta da uma olhada. Commented 18/11/2015 às 20:00

2 Respostas 2

2

Como você pretende fazer isso no menu, existem modos mais 'práticos' de se obter esse resultado. Se você está utilizando o ui-router, pode ler mais sobre ele aqui, basta você inserir uma linha com a seguinte expressão ui-sref-active="nomedaclasse". No seu caso, seria mais ou menos assim:

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

Deste modo, a classe será aplicada automaticamente naquele menu, quando ele estiver na página 'Início'.

Para usar o ng-class de modo isolado, você pode fazer da seguinte maneira:

<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

Como você está iniciando, recomendo que dê uma olhada também no ui-router, pois notei que você está usando a navegação com #.

Qualquer dúvida, só questionar.

0

O ng-class deve ser utilizado com o nome de uma classe e uma expressão:

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

Um exemplo de código meu:

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

Nesse meu código o li fica com a classe active apenas quando a variável geral.navID for igual a home.

Você também vai precisar de uma variável de controle exatamente para manter o estado de ativo do menu. Ai em cada troca de página você atualiza o valor dela para a página atual.

2
  • essa variável de controle seria algo como para identificar qual elemento foi clicado? (desculpa, mas a parte de js (ou a programação propriamente dita) é mais complexo pra mim).
    – trofonia
    Commented 7/12/2015 às 20:20
  • Essa variável seria para identificar qual a página ativa, e refletir isso no menu com um efeito. @trofonia Commented 10/12/2015 às 3:43

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 .