アクティブなクラスを、静的タブの代わりに最初の動的タブに追加するにはどうすればいいですか？

Question

ui-bootstrapのタブセットに問題があります。私は1つの静的タブ（その他）を持ち、残りはng-repeatを使って追加されます。動的に読み込まれた最初のタブをアクティブにすることはできません。代わりに、アクティブなクラスを常に静的なものに追加します。最初の動的タブにアクティブなクラスを追加するにはどうしたらいいですか？私は明確にするためにいくつかの混乱を取り除いた。

ドキュメントはここにある：https://angular-ui.github.io/bootstrap/#/tabs

<tabset> 
    <tab ng-repeat="room in rooms" heading="{{room.Name}}"> 
    <div> 
     <div ng-repeat="item in room track by $index"> 
     <div> 
      <p>{{item.Title}}</p> 
     </div> 
     <div> 
     </div> 
     </div> 
    </div> 
    </tab> 
    <tab heading="Other"> 
    <form name="customItem"> 
     <input type="text" class="form-control" ng-model="customItem.Title" placeholder="Title" /> 
     <button class="btn btn-default" ng-click="addCustomItem(customItem.Title)">Add custom item</button> 
    </form> 
    </tab> 
</tabset> 

Answer 1

あなたは、タブのNGリピートでNG-クラスを試してみてください、それがこのコードの最初の要素であるかどうかをチェックできます。ng-class="{'active': $index==0}"

<tabset> 
    <tab ng-repeat="room in rooms" heading="{{room.Name}}" ng-class="{'active': $index==0}"> 
    <div> 
     <div ng-repeat="item in room track by $index"> 
     <div> 
      <p>{{item.Title}}</p> 
     </div> 
     <div> 
     </div> 
     </div> 
    </div> 
    </tab> 
    <tab heading="Other"> 
    <form name="customItem"> 
     <input type="text" class="form-control" ng-model="customItem.Title" placeholder="Title" /> 
     <button class="btn btn-default" ng-click="addCustomItem(customItem.Title)">Add custom item</button> 
    </form> 
    </tab> 
</tabset>