我正在使用带有Angular ng-repeat的Bootstrap 选项卡。
我遇到的问题是第一个li
和第一个div.tab-pane
都需要一个活动课程。Bootstrap 会在单击选项卡后处理该问题,但如您所见,不是在加载时。
我的问题是,如何在第一个li
和上设置一个活动课程div.tab-pane
?
演示:
我正在使用带有Angular ng-repeat的Bootstrap 选项卡。
我遇到的问题是第一个li
和第一个div.tab-pane
都需要一个活动课程。Bootstrap 会在单击选项卡后处理该问题,但如您所见,不是在加载时。
我的问题是,如何在第一个li
和上设置一个活动课程div.tab-pane
?
演示:
您所要做的就是ng-class
在您最初希望处于活动状态的选项卡和选项卡窗格上放置一个指令。您可以将 ng-class 指令中的表达式更改为$index == 0
您想要的任何内容。这可以在您的范围内使用函数或变量。
这是一个展示如何做到这一点的 JS Fiddle:http: //jsfiddle.net/digitalzebra/qqPZd/
这是最终代码...注意 ng-class 指令:
<div ng-app>
<div ng-init="names = [{name:'one'}, {name:'two'}, {name:'three'}, {name:'four'}, {name:'five'}]">
<ul class="nav nav-tabs">
<li ng-repeat="name in names" ng-class="{active: $index == 0}">
<a href="#tab{{$index + 1}}" data-toggle="tab">Week {{acute.Week}}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="name in names" ng-class="{active: $index == 0}">
<p>{{$index + 1}}</p>
</div>
</div>
</div>
</div>