Angularjs:将第一个标签页加载时激活为

时间:2020-02-03 14:58:53

标签: angularjs servicenow bootstrap-tabs

我们正在ServiceNow中创建一个标签小部件,并希望在页面加载时将第一个标签激活为活动标签。现在,在页面加载时,我们将看到以下内容:

enter image description here

我们实际上是希望在加载时看到这个:

enter image description here

我们的代码如下:

<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,但它返回了控制台错误。知道如何在页面加载时启动第一个标签吗?谢谢!

1 个答案:

答案 0 :(得分: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}">