Hey, even though you resolved the issue. You can also use bootstrap.ui to create bootstrap tabs with angular.
http://angular-ui.github.io/bootstrap/ Heres a link to the tabs example: http://plnkr.co/edit/?p=preview On Wednesday, January 15, 2014 1:33:00 PM UTC-5, Adam Grant wrote: > > Thanks Boss, this solved my problem! What's odd is that the function for > adding/removing classes was executing, but the class modification on the > tab elements wasn't always getting applied. Some odd JS trickery, mayhaps... > > - Adam > > > On Tuesday, 5 February 2013 09:58:46 UTC-8, Kyle Brown wrote: >> >> Hi, >> >> You didn't seem to include the partials source (where the tabs markup >> appears to be) so its difficult to diagnose. However I experienced the same >> issue you have. The way I fixed it was omitting the href on the nav anchors >> (so that angularjs does an automatic preventDefault()) and use the >> bootstrap tab data-target attribute instead: >> >> <ul class="nav nav-tabs"> >> <li class="active"> >> <a data-target="#tab-one" data-toggle="tab">Tab One</a> >> </li> >> <li> >> <a data-target="#tab-two" data-toggle="tab">Tab Two</a> >> </li> >> </ul> >> >> <div class="tab-content"> >> <div id="tab-one" class="tab-pane active"> >> <h2>Tab 1</h2> >> </div> >> <div id="tab-two" class="tab-pane"> >> <h2>Tab 2</h2> >> </div> >> </div> >> >> >> --Kyle >> >> On Friday, October 19, 2012 3:20:24 AM UTC-7, [email protected] wrote: >>> >>> >>> Hi, >>> >>> I'm just developing an application with angular and nodejs. In my >>> register form, i have used bootstrap tabs (pills), which has form fields. I >>> have to double-click to show the content of next tab. Due to this data >>> entered in the first tabs is lost on selecting the second or subsequent >>> tabs(I have double click the tabs to show). Can someone point out the issue >>> here? >>> >>> Note: If i use the same in normal html, it works fine. The issue arises >>> when used with angularjs >>> >>> Env: >>> Latest Bootstrap , jquery (1.8.2), angular(1.0.1) >>> >>> app.js >>> ========== >>> angular.module('myApp', ['myApp.filters', 'myApp.services', >>> 'myApp.directives']). >>> config(['$routeProvider', '$locationProvider', >>> function($routeProvider, $locationProvider) { >>> $routeProvider.when('/view1', {templateUrl: >>> '/partials/partial1.html', controller: MyCtrl1}); >>> $routeProvider.when('/view2', {templateUrl: >>> '/partials/partial2.html', controller: MyCtrl2}); >>> $routeProvider.when('/posts', {templateUrl: '/partials/posts.html', >>> controller: PostController}); >>> $routeProvider.when('/register', {templateUrl: >>> '/partials/register.html', controller: RegisterController}); >>> $routeProvider.when('/search', {templateUrl: >>> '/partials/search.html', controller: SearchController}); >>> $routeProvider.otherwise({redirectTo: '/view1'}); >>> $locationProvider.html5Mode(true); >>> }]); >>> >>> >>> index.html >>> ========== >>> >>> <html ng-app="myApp"> >>> <head> >>> <link href="css/bootstrap.min.css" rel="stylesheet"> >>> <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> >>> <script src="js/lib/jquery/jquery-latest.js"></script> >>> <script src="js/lib/bootstrap/bootstrap.min.js"></script> >>> <script src="js/lib/angular/angular.min.js"></script> >>> <script src="js/app.js"></script> >>> <script src="js/services.js"></script> >>> <script src="js/controllers.js"></script> >>> <script src="js/filters.js"></script> >>> <script src="js/directives.js"></script> >>> </head> >>> <body> >>> <div ng-view> </div> >>> </body> >>> </html> >>> >>> >>> I have attached the screenshots of single and double click of the tabs. >>> >>> >>> >>> Thanks, >>> Arun >>> >> -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
