twitter-bootstrap - AngularJS 设置初始事件类

Question

我正在使用 Bootstrap tabs与 Angular ng-repeat .

我遇到的问题是第一个 li和第一个 div.tab-pane每个人都需要一个活跃的类(class)。 Bootstrap 会在单击选项卡后处理该问题，但如您所见，不是在加载时。

我的问题是，如何在第一个 li 上设置事件类(class)？和 div.tab-pane ?

演示:

http://jsfiddle.net/FQgHx/

Answer 1

您所要做的就是输入 ng-class您希望最初处于事件状态的选项卡和选项卡 Pane 上的指令。您可以从 $index == 0 更改表达式在 ng-class 指令中添加任何你想要的。这可以在您的范围内使用函数或变量。

这是一个 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>