AngularJS设置的初始活动类 [英] AngularJS set initial active class

问题描述

我使用引导标签用的角NG-重复

我遇到的问题是，在第一个里和第一 div.tab窗格每需要一个活跃的类。引导需要照顾的的之后的标签被点击，但是你可以看到，而不是负担。

The problem I'm running into is that the first li and the first div.tab-pane each need an active class. Bootstrap takes care of that after a tab is clicked but, as you can see, not on load.

我的问题是，如何设置一个活动类的第一个里和 div.tab窗格 ？

My question is, how can I set an active class on the first li and div.tab-pane?

演示：

http://jsfiddle.net/FQgHx/

推荐答案

所有您需要做的就是把一个纳克级指令的标签，标签面板，你想开始活跃。您可以在纳克级的指令，无论你想改变从 $指数== 0 除权pression。这可以用在你的范围的函数或变量。

All you have to do is put an ng-class directive on the tab and tab pane that you would like active initially. You can change the expression from $index == 0 in the ng-class directive to whatever you would like. This could use a function or variable in your scope.

下面是一个JS提琴展示如何做到这一点：
http://jsfiddle.net/digitalzebra/qqPZd/

Here is a JS Fiddle showing how to do this: http://jsfiddle.net/digitalzebra/qqPZd/

这是最后的code ...注意到纳克级的指令：

And here is the final code... notice the ng-class directives:

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

这篇关于AngularJS设置的初始活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！