twitter-bootstrap – AngularJS设置初始活动类

发布时间：2020-12-18 00:27:42 所属栏目：安全来源：网络整理

导读：我正在使用 Bootstrap tabs和 Angular ng-repeat. 我遇到的问题是第一个li和第一个div.tab-pane都需要一个活动类.单击选项卡后,Bootstrap将对此进行处理,但正如您所看到的,不是在加载时. 我的问题是,如何在第一个li和div.tab-pane上设置一个活动类？演示：

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

我遇到的问题是第一个li和第一个div.tab-pane都需要一个活动类.单击选项卡后,Bootstrap将对此进行处理,但正如您所看到的,不是在加载时.

我的问题是,如何在第一个li和div.tab-pane上设置一个活动类？

演示：

http://jsfiddle.net/FQgHx/

解决方法

您所要做的就是在最初要激活的选项卡和选项卡窗格中放置ng-class指令.您可以将ng-class指令中$index == 0的表达式更改为您想要的表达式.这可以使用范围中的函数或变量.

这是一个JS小提琴,展示了如何做到这一点：
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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!