使用AngularJS停用引导导航栏按钮
Deactivating Bootstrap Navbar button using 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>
一切都很好,除了当你点击导航上的一个按钮,然后点击另一个按钮时,你点击的上一个按钮不会被停用(也就是说,"活动"类不会被删除,也就是说它仍然突出显示)。我该怎么解决这个问题?
您可以使用控制器中的函数来更新活动按钮的变量。
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>
这里有类似的解决方案。
我不知道为什么它适用于函数,但不适用于视图中的插值。可能,您会看到许多本地作用域。
相关文章:
- Flexslider导航按钮在悬停时不可见,带有橙色框
- 有没有一种方法可以检测ios<>使用jquery和触发器操作形成导航按钮
- 为什么我的导航按钮或按钮文本不会移动到中心
- 从导航按钮 JavaScript 中删除动画
- 如何从super.simple.slider中删除左/右导航按钮
- 带有导航按钮的基本图像滑块插件
- 折叠导航按钮不适用于twitter引导程序设计的移动设备
- 使用导航按钮后,幻灯片需要暂停
- 单击我的导航按钮时切换我的菜单
- Jquery Fancybox 如何添加额外的导航按钮
- 照片滑动 - 无图库视图 - 没有导航按钮
- YUI 轮播导航按钮在排序列表下
- 如何仅在每次单击可滚动(jquery工具)中的导航按钮时加载图像,而不是一次加载所有图像
- 使用导航按钮制作基本 Javascript 幻灯片时出错
- 如何在动画完成之前停止按下导航按钮
- 离子导航按钮内的后退按钮
- jQuery选项卡:摆脱第二个选项卡上的“上一个”导航按钮
- 在导航按钮上设置 1 秒超时
- 引导 3 导航按钮,从切换到下拉列表
- 猫头鹰轮播导航按钮未显示