Geek Answers Handbook

Bootstrap 3: Undo tab using angular js

I work with angular js and bootstrap 3 and my application works like ... I have a view where you have several links that allow you to show divs with multiple tabs and select one of them. It works great. But if I change the tab by clicking on it, and then I hide the tabbed view when I click on another click. I am showing a tabbed view, with the tab selected from the link correct, but ... with the previous tab pressed.

So, how can I deselect the tab on which I clicked it?

Change 1:

I am going to post some screenshots to better explain my problem.

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Edit 2:

I am adding this plunker to show how it works with my code, and you can verify that if you click on a tab, if later returns by clicking a button, you will not select the correct tab. 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; } });

Edit 3:

Other problems:

In my code, I have tabs and a Bootstrap calendar, and with this solution it works fine without a boot calendar, but if I add a bootstrap calendar, this will not work correctly.

I changed my original plunker and I added a boot calendar and changed these libraries:

 <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>

Under these words:

 <script type="text/javascript" src="bootstrap.min.js"></script> <script type="text/javascript" src="ui-bootstrap-tpls-0.14.3.min.js"></script>

The code of these libraries that you have on the plunker. In addition, I added a controller that controls the boot calendar.

Well, if we go to the plunker: https://plnkr.co/edit/PaSqa0jxQjz48pzcmBMa

We can see that we have a boot calendar where I can’t choose a day more than today + 1. That's right! But, if I click on the "Tab 2" button, the tab that we see is not 2, it is 1. If I do the same with tab 3, I will get the same result. It is not right. The correct functionality. If I press the "Tab 2" button, we can see, for example, tab 2.

Well, if I change these libraries to plunker ...

 <script type="text/javascript" src="bootstrap.min.js"></script> <script type="text/javascript" src="ui-bootstrap-tpls-0.14.3.min.js"></script>

In this decision:

 <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>

We see that the tabs work correctly, but the boot calendar allows you to select days more than today + 1. And this is wrong!

+6
source share
1 answer

I would recommend using the angular -ui-bootstrap tab for this. It provides angular wrappers around most of the bootstrap functionality (mostly directives), therefore it makes writing these types of things easier (and the code is cleaner, as you will see below). I changed your plunkr as minimally as possible, but changed it to use ui-bootstrap tabs: https://plnkr.co/edit/qqvY2acsZWbkyFCCT7qr?p=info

New controller:

 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 changes:

 <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 , which is passed to the active attribute on <uib-tabset> , simply represents the index of the currently opened tab, so just changing its value will change the tab that is open / visible. There are a few more attributes that can be used for these directives (you can see them on the page I linked to above), but this shows how you can use these tab directives. I did not see the problem described above after these changes.

+7
source

More articles:


All Articles