AngularJS set начальный активный класс

Question

Я использую Bootstrap tabs с Angular ng-repeat.

Проблема, с которой я столкнулся, заключается в том, что первые li и первые div.tab-pane нуждаются в активном классе. Bootstrap позаботится об этом после нажата вкладка, но, как вы можете видеть, а не при загрузке.

Мой вопрос в том, как я могу установить активный класс на первых li и div.tab-pane?

Демо:

http://jsfiddle.net/FQgHx/

Answer 1

Все, что вам нужно сделать, это положить ng-class директиву на закладке и вкладки панели, которые вы хотели бы активен изначально. Вы можете изменить выражение от $index == 0 в директиве ng-class по своему желанию. Это может использовать функцию или переменную в вашей области.

Вот является JS Скрипки, показывающий, как это сделать: http://jsfiddle.net/digitalzebra/qqPZd/

И вот окончательный код ... обратите внимание на директивы нг-класса:

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