Thank you to everyone who contributed. I found it all very useful. On Wednesday, January 15, 2014 2:30:14 PM UTC-5, Adam Grant wrote: > > Awesome, I'll check it out, thanks! > > - Adam > > On Wednesday, 15 January 2014 11:06:48 UTC-8, Damir Vazgird wrote: >> >> 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/d/optout.
