Change selected menu according to URL segment in Angular

Question

Change selected menu according to URL segment in Angular

Navigation

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

1

I'm developing a project and I'm using Angular, I need that when I access the internal page, the menu is selected, until the beauty, but problem is when the internal page contains slug or some inner internal, the code I'm using :

Html:

 <li class="waves-effect waves-light" ng-class="(url_atual == '/module9'? fundo_selecionado:fundo_normal)">
                        <img src="app/template/img/col.png">
                        <p>Colaboradores</p>
                    </li>

Controller:

        $scope.url_atual = $location.url();
        $scope.fundo_selecionado = 'fundo_selecionado';
        $scope.fundo_normal = 'fundo_normal';

CSS:

.fundo_selecionado{
  background-color: #fff!important;
}
.fundo_normal{
  background-color: $cor_cinza!important;
}

As you can see, I use an ng-class and if the current url is equal to the module accessed, it plays the class deep_selected, else it plays the bottom_normal class. The problem is when I have built-in module, such as / module9 / internal or module9 / slug so it does not keep the selected menu. Does anyone have a clue how I can keep the menu selected even inside the modules?

Following route system:

   function Config($routeProvider) {
    $routeProvider
    .when('/module9', {
        templateUrl: 'module9/template/index.html',
        controller: 'module9Controller',
        controllerAs: 'vm'
    })
    .when('/module9/:module9Slug', {
        templateUrl: 'module9/template/interna.html',
        controller: 'module9Controller',
        controllerAs: 'vm'
    })
    .when('/module9/adicionar/add', {
        templateUrl: 'module9/template/adicionar.html',
        controller: 'module9Controller',
        controllerAs: 'vm'
    });
}

javascript angularjs

asked by anonymous 29.04.2016 / 19:12

2 answers

0

Try to do this.

<li class="waves-effect waves-light" ng-class="(url_atual == '/module9' || url_atual == '/module9/interna ou module9/slug' ? fundo_selecionado:fundo_normal)">
    <img src="app/template/img/col.png">
    <p>Colaboradores</p>
</li>

29.04.2016 / 21:19

Update with select concatenated between two columns of the same mysql table Insert via EntityFramework "IDENTITY_INSERT is set to OFF" error

score 1 · Accepted Answer

The momentary solution was to identify each menu with a class and make a case by checking the menu and execute the function when the route is changed, it follows code:

vm.MenuInternas = function(){
            $timeout(function() {
                switch($location.path()) {
                    case '/':
                        $('.menu a').removeClass('active-Menu');
                    break;
                    case '/quemsomos':
                        $('.menu a').removeClass('active-Menu');
                        $('.quemsomos_').addClass('active-Menu');
                    break;
                    case '/solucoes':
                        $('.menu a').removeClass('active-Menu');
                        $('.solucoes_').addClass('active-Menu');
                    break;
                    default: 
                    break;
                }
            });
        }
        vm.MenuInternas();

Performing function in route switching:

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
    vm.MenuInternas();
})