Deactivating Bootstrap Navbar button using AngularJS

Question

Here I have the code for a bootstrap navigation bar:

var cvApplication = angular.module('cvApplication', []);

cvApplication.controller('contentCtrl', function ($scope) {
    $scope.navButtons = ["Home", "About", "Contacts"];
    $scope.btnActive = "About";
});

<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
            <div class="container-fluid">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Subjects</a>
                </div>

                <div class="collapse navbar-collapse" id="mainNavBarToggler">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="btnActive = navButton">
                            <a href="#">{{navButton}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
      
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
        <script src="script.js"></script>
    </body> 
</html>

Everything works great, except for the fact that when you click one of the buttons on the navigation and then click another one, the previous one you clicked doesn't get deactivated (aka the 'active' class isn't removed aka it remains highlighted). How can I fix this?

score 1 · Accepted Answer · edited May 23 '17 at 12:31

You can use function in controller to update variable for active button.

var cvApplication = angular.module('cvApplication', []);

cvApplication.controller('contentCtrl', function ($scope) {
    $scope.navButtons = ["Home", "About", "Contacts"];
    $scope.btnActive = "About";
    $scope.updateActive = function(navButton) {
            $scope.btnActive = navButton;
    };
});

<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
            <div class="container-fluid">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Subjects</a>
                </div>

                <div class="collapse navbar-collapse" id="mainNavBarToggler">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="updateActive(navButton)">
                            <a href="#">{{navButton}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
      
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
        <script src="script.js"></script>
    </body> 
</html>

Here is similar solution.

I don't know why it works with function, but don't work with interpolation in view. Possible, you get many local scopes in view.

Deactivating Bootstrap Navbar button using AngularJS

1 Answers1