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]: >>>> >>>> >>>> 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.
