Boot tabs with AngularJS

Question

I have problem using bootstrap tabs in AngularJS.

<div class="tab-container"> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> </ul> <div class="tab-content"> <div class="tab-pane active cont" id="home"> <h3 class="hthin">Basic Tabs</h3> <p>This is an example of tabs </p> </div> <div class="tab-pane cont" id="profile"> <h2>Typography</h2> <p>This is just an example of content </div> <div class="tab-pane" id="messages">..sdfsdfsfsdf. </div> </div> </div> 

The problem is that when I select a tab, for example "Home" or "Profile", I am redirected to / home or / profile url, and not showing the contents of the tab itself.

I get the feeling that this can be somehow achieved with the directive and prevent redirection to the home page or page profile, rather than showing the contents of the tab.

Answer 1

You can try using the Angular UI bootstrap boot components located here, http://angular-ui.imtqy.com/bootstrap/

Answer 2

replace href with data-target .

 <li class="active"><a data-target="#home" data-toggle="tab" >Home</a></li> 

Answer 3

A directive can help you deal with it.

 app.directive('showTab', function () { return { link: function (scope, element, attrs) { element.click(function (e) { e.preventDefault(); jQuery(element).tab('show'); }); } }; }); <a show-tab href="#tab_1"> Tab 1 </a> 

A source

Answer 4

this code will solve the problem when using Angularjs

 <div class="tabbable tabs-below" ng-init="selectedTab = 1;"> <ul class="nav nav-tabs nav-justified"> <li ng-class="{active: selectedTab == 1}"> <a href="#" ng-click="selectedTab = 1;">Personal</a> </li> <li ng-class="{active: selectedTab == 2}"> <a href="#" ng-click="selectedTab = 2;">Education</a> </li> <li ng-class="{active: selectedTab == 3}"> <a href="#" ng-click="selectedTab = 3;">Contact</a> </li> </ul> <div class="tab-content" ng-show="selectedTab == 1"> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-content" ng-show="selectedTab == 2"> 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="tab-content" ng-show="selectedTab == 3"> 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>