angularJS为bootstrap Tabs添加一个class + set default

时间:2013-04-03 17:44:40

标签: html class angularjs angular-ui

我这里有一个有角度的可能。如何设置默认选项卡? +将类添加到特定选项卡?

http://plnkr.co/edit/FPMf8i

e.g。我希望默认选择标签2。然后选项卡1有一个特定的类。

我试过

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

但不断收到错误

不能使用jquery必须是库已经存在。

1 个答案:

答案 0 :(得分:4)

ng-model添加初始值,然后使用ng-class设置动态类

<强> Plnkr

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

查看

<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>

<强>控制器

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

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