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