我正在使用角度js和bootstrap 3,我的应用程序就像…我有一个视图,你有几个链接,让你显示一个div有几个选项卡,然后选择其中一个.这很好用.但是如果我通过点击它来更改标签,然后当我点击另一个点击时我用标签隐藏视图我用标签显示视图,从链接中选择标签,这是正确的,但是……单击上一个选项卡.
那么,我如何取消选择我点击它的标签？
编辑1：
我将发布几个截图,试图更好地解释我的问题.
编辑2：
我添加这个plunker来显示它如何工作我的代码,你可以检查如果你在选项卡上clic,如果以后返回单击按钮,你没有选择正确的选项卡. https://plnkr.co/edit/y22T01OwxgttDWM1mJeH
HTML：
<body ng-controller="MainCtrl as ctrl">
<button id="bTab1" ng-click="ctrl.buttonClicked($event)">
Tab 1
</button>
<button id="bTab2" ng-click="ctrl.buttonClicked($event)">
Tab 2
</button>
<button id="bTab3" ng-click="ctrl.buttonClicked($event)">
Tab 3
</button>
<div ng-show = "ctrl.show_tabs">
<div class = "row" style = "text-align: right; margin-top: 10px">
<button ng-click="ctrl.closeTab()">
Hide Tabs
</button>
</div>
<ul class="nav nav-tabs" id="myTab">
<li ng-class = "ctrl.active_pai"><a data-target="#pai" data-toggle="tab">PAI</a></li>
<li ng-class = "ctrl.active_pap"><a data-target="#pap" data-toggle="tab">PAP</a></li>
<li ng-class = "ctrl.active_ip"><a data-target="#ip" data-toggle="tab">IP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" ng-class = "ctrl.active_pai" id="pai">Content PAI</div>
<div class="tab-pane" ng-class = "ctrl.active_pap" id="pap">Content PAP</div>
<div class="tab-pane" ng-class = "ctrl.active_ip" id="ip">Content IP</div>
</div>
</div>
</body>
使用Javascript：
var app = angular.module('plunker',[]);
app.controller('MainCtrl',function($scope) {
var self = this;
$scope.name = 'World';
self.show_tabs = false;
self.active_pai = "";
self.active_pap = "";
self.active_ip = "";
self.buttonClicked = function(event) {
self.show_tabs = true;
if (event.currentTarget.id == "bTab1"){
self.active_pai = "active";
self.active_pap = "";
self.active_ip = "";
}
if (event.currentTarget.id == "bTab2"){
self.active_pai = "";
self.active_pap = "active";
self.active_ip = "";
}
if (event.currentTarget.id == "bTab3"){
self.active_pai = "";
self.active_pap = "";
self.active_ip = "active";
}
};
self.closeTab = function(){
self.show_tabs = false;
}
});
编辑3：
更多问题：
在我的代码中,我有选项卡和Bootstrap日历,并且给定的解决方案在没有引导日历的情况下工作正常,但是如果添加引导程序日历,则无法正常工作.
我修改了我的origina plunker并添加了一个bootstrap日历并更改了这些库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
通过这些：
<script type="text/javascript" src="bootstrap.min.js"></script> <script type="text/javascript" src="ui-bootstrap-tpls-0.14.3.min.js"></script>
您在plunker上获得的这些库的代码.另外,我添加了管理引导日历的控制器.
好的,如果我们去找那个：01007
我们可以看到我们有一个引导日历,我不能选择比今天更大的日子1.这是正确的！但是,如果我点击按钮“Tab 2”,我们可以看到的标签不是2,它是1.如果我对标签3做同样的事情,我得到相同的结果.那是错的.正确的功能是如果我点击按钮“Tab 2”,我们可以看到例如选项卡2.
好的,如果我更换了这些库…
<script type="text/javascript" src="bootstrap.min.js"></script> <script type="text/javascript" src="ui-bootstrap-tpls-0.14.3.min.js"></script>
通过解决方案中的给定：
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
我建议使用
angular-ui-bootstrap tabs.它为大多数引导功能(主要是指令)提供了角度包装,因此它使这些类型的事情更容易编写(代码更清晰,如下所示).我尽可能少地修改了你的plunkr,但更改了它以使用ui-bootstrap选项卡：
https://plnkr.co/edit/qqvY2acsZWbkyFCCT7qr?p=info
原文链接：https://www.f2er.com/angularjs/240512.html新控制器：
app.controller('MainCtrl',function($scope) {
var self = this;
$scope.name = 'World';
self.buttonClicked = function(index) {
self.show_tabs = true;
self.active = index;
};
self.closeTab = function(){
self.show_tabs = false;
}
});
Html更改：
<button id="bTab1" ng-click="ctrl.buttonClicked(1)">
Tab 1
</button>
<button id="bTab2" ng-click="ctrl.buttonClicked(2)">
Tab 2
</button>
<button id="bTab3" ng-click="ctrl.buttonClicked(3)">
Tab 3
</button>
...
<div ng-show = "ctrl.show_tabs">
...
<uib-tabset active="ctrl.active">
<uib-tab index="1" heading="PAI">Content PAI</uib-tab>
<uib-tab index="2" heading="PAP">Content PAP</uib-tab>
<uib-tab index="3" heading="IP">Content IP</uib-tab>
</uib-tabset>
</div>
ctrl.active,传递给< uib-tabset>上的活动属性只表示当前打开的选项卡的索引,因此只更改其值将更改打开/可见的选项卡.还有一些属性可用于这些指令(您可以在我上面链接的页面上看到它们),但这显示了如何使用这些Tab指令的基础.在这些更改之后,我没有看到您在上面描述的问题.
