twitter-bootstrap - AngularJS の初期アクティブ クラスの設定

Question

Angular ng-repeatでBootstrap タブを使用しています。

私が直面している問題は、最初liと最初のdiv.tab-paneそれぞれがアクティブなクラスを必要とすることです。Bootstrap は、タブがクリックされた後にそれを処理しますが、ご覧のとおり、ロード時ではありません。

li私の質問は、最初とにアクティブなクラスを設定するにはどうすればよいdiv.tab-paneですか?

デモ：

http://jsfiddle.net/FQgHx/

Answer 1

ng-class最初にアクティブにしたいタブとタブ ペインにディレクティブを配置するだけです。$index == 0ng-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>