CODEWITHSUNDEEP
angularjstwitter-bootstrap-3
user3017191
user3017191

Reputation: 123

AngualarJS bootstrap Tab set Active item

I am trying to set second tab as an active one, unfortunately heading goes off. Is there anything i am missing?

<tabset>
   <tab disabled="true">
      <tab-heading><i class="fa fa-bell"></i> First tab</tab-heading>
      <tab-content> 
         fixed tab content 
      </tab-content>
   </tab>
   <tab active="true">
      <tab-heading><i class="fa fa-bell"></i> First tab</tab-heading>
      <tab-content> 
         First content 
      </tab-content>
   </tab>
   <tab>
      <tab-heading><i class="fa fa-bell"></i> Second Tab</tab-heading>
      <tab-content> 
         Second content 
      </tab-content>
   </tab>
</tabset>

Upvotes: 3

Views: 18553

Answers (2)

eXaminator
eXaminator

Reputation: 353

To extend on Markus' answer, if you just want to set a tab as active (like I do for testing my site) without getting a controller involved you could to this:

<tab active="isActive" ng-init="isActive = true">

But I wouldn't recomend this in production code as ng-init should hardly ever be used.

Upvotes: 4

Markus K&#246;sel
Markus K&#246;sel

Reputation: 753

You can not set active to true/false. That way it cannot be changed. Bind it to a variable...

<tab active="isActive">

and set ...

$scope.isActive = true;

in your Controller.

And i think you should remove the ¸<tab-content> 's. You do not need them.

Upvotes: 12

Related Questions