2013-05-30 14 views
6

Angular ng-repeat ile Bootstrap tabs kullanıyorum.AngularJS başlangıç ​​etkin sınıfı

Karşılaştığım sorun, ilk li ve ilk div.tab-pane'un her birinin etkin bir sınıfa ihtiyacı olmasıdır. Bootstrap, numaralı telefondan numaranı tıkladıktan sonra bir sekmeye tıkladıktan sonra yüklediğiniz gibi değil.

Sorum şu: İlk li ve div.tab-pane'da nasıl aktif bir sınıf ayarlayabilirim?

Demo: Yapmanız gereken tek şey, başlangıçta aktif istiyoruz sekmesi ve sekme bölmedeki bir ng-class direktifini konur

http://jsfiddle.net/FQgHx/

cevap

14

. İstediğiniz ng sınıfı yönergesindeki ifadeyi $index == 0'dan değiştirebilirsiniz. Bu, kapsamınızdaki bir işlevi veya değişkeni kullanabilir. http://jsfiddle.net/digitalzebra/qqPZd/

Ve burada son kodu ... ng sınıf direktiflerini fark:

<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> 
İşte

bir JS Fiddle Bunun nasıl gösteriyor