AngularJS初期アクティブクラスを設定

Question

私はBootstrap tabsをAngular ng-repeatと使用しています。

私が遭遇している問題は、最初のliと最初のdiv.tab-paneはそれぞれアクティブなクラスが必要です。ブートストラップはの後にタブをクリックしますが、表示されているように、ロード中ではありません。

私の質問は、まず最初にアクティブなクラスを設定することですliとdiv.tab-pane？

デモ：

http://jsfiddle.net/FQgHx/

Answer 1

あなたがしなければならないのは、あなたが最初にアクティブたいタブやタブウィンドウにng-classディレクティブを入れています。 ng-classディレクティブの$index == 0の式を好きなものに変更することができます。これは、スコープ内の関数または変数を使用する可能性があります。 NG-クラス指令に気づく... http://jsfiddle.net/digitalzebra/qqPZd/

そしてここでは、最終的なコードです：ここで

は、これを行う方法を示すJSフィドルある

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