Angularjs: запуск первой вкладки как активной при загрузке страницы

Question

Мы создаем виджет вкладок в ServiceNow и хотим инициировать первую вкладку в качестве активной вкладки при загрузке страницы. Прямо сейчас, когда страница загружается, мы видим следующее:

На самом деле мы хотим видеть это при загрузке:

Наш код выглядит следующим образом:

<ul class="nav nav-tabs">
      <li ng-click="c.activateClass(tabs)" ng-repeat="tabs in c.data.tab_labels track by $index" ng-class="{'active':tabs.active}">
        <a data-toggle="tab" href="#{{tabs}}">{{tabs}}</a>
      </li>
    </ul>


    <div class="tab-content" >
      <div ng-repeat="content in c.data.tab_labels" id="{{content}}" class="tab-pane fade in active">
        <h3>{{content}}</h3>
        <p>Some content.</p>
      </div>
    </div>

    function($scope) {
      /* widget controller */
      var c = this;

        c.data.tab_labels = c.options.tab_labels.split(',');

        c.activateClass = function(subModule){
      subModule.active = !subModule.active;
    }

        console.log('tabs');
        console.log($scope);
    }

Мы пытались использовать ng-init, но он возвращал консольную ошибку. Любая идея, как начать первую вкладку при загрузке страницы? Спасибо!

Answer 1

Вы можете установить активную вкладку как активную следующим образом:

if(c.data.tab_labels.length > 0) {
    c.data.tab_labels[0].active = true;
}

и отображать активное содержимое:

<div ng-repeat="content in c.data.tab_labels | filter:{active:true}">