deaktivieren Bootstrap Navbar Taste AngularJS

Hier habe ich den Code für eine Bootstrap-Navigationsleiste:deaktivieren Bootstrap Navbar Taste AngularJS

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>

Alles funktioniert gut, außer der Tatsache, dass, wenn Sie auf eine der Schaltflächen klicken Klicken Sie auf die Navigation und dann auf eine andere, die vorherige, auf die Sie geklickt haben, wird nicht deaktiviert (auch die aktive Klasse wird nicht entfernt, auch wenn sie hervorgehoben bleibt). Wie kann ich das beheben?

Quelle

2016-05-09 Zodiac Zubeda

Sie können die Funktion im Controller verwenden, um die Variable für die aktive Schaltfläche zu aktualisieren.

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 ist ähnliche Lösung.

Ich weiß nicht, warum es mit der Funktion funktioniert, aber nicht mit Interpolation in Sicht arbeiten. Möglich, Sie erhalten viele lokale Bereiche im Blick.

Quelle

2016-05-09 02:15:16 mkczyk

deaktivieren Bootstrap Navbar Taste AngularJS

Antwort

Verwandte Themen