CODEWITHSUNDEEP
htmlclassangularjsangular-ui
MonteCristo
MonteCristo

Reputation: 1550

angularJS add a class + set default for bootstrap Tabs

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

http://plnkr.co/edit/FPMf8i

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.

Upvotes: 1

Views: 1863

Answers (1)

Justen
Justen

Reputation: 4869

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;
});

Upvotes: 4

Related Questions