angularJS add a class + set default for bootstrap Tabs

Question

I have an angular tabbable here. How can I set default tab? + add a class to specific tab?

e.g. I want the tab 2 to be slected by default. Then tab 1 have a specific class.

I tried

 element.children[1].addClass('test');
 element[0].children[0].addClass('test');
 element[0].addClass('test');

but keep getting an error

Can't use jquery has to be library already there.

Justen · Accepted Answer · 2013-04-03 19:55:50Z

4

Add an initial value for your ng-model, then use ng-class to set dynamic classes

Plnkr

http://plnkr.co/edit/udxAT0?p=preview

View

<div ng-controller="TabsCtrl">
  <div class="tabbable" ng-model="currentTab">
    <div class="tab-pane" ng-class="{'special-class': currentTab == 1}" title="1" value="1">
      Content 1
    </div>
    <div class="tab-pane" title="2" value="2">
      Content 2
    </div>
  </div>
</div>

Controller

var app = angular.module('plunker', ['bootstrap']);

app.controller("TabsCtrl", function($scope) {
  $scope.currentTab = 1;
});

edited Apr 3, 2013 at 19:55

answered Apr 3, 2013 at 18:19

Justen

4,8799 gold badges48 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularJS add a class + set default for bootstrap Tabs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related