CODEWITHSUNDEEP
angularjsservicenowbootstrap-tabs
Dave
Dave

Reputation: 1277

Angularjs: initiating first tab as active on page load

We are creating a tabs widget in ServiceNow and want to initiate the first tab as the active tab when the page loads. Right now when the page loads, this is what we see:

enter image description here

We actually want to see this on load:

enter image description here

Our code looks like this:

<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);
    }

We tried to use ng-init, but it was returning a console error. Any idea how to initiate the first tab on page load? Thanks!

Upvotes: 0

Views: 749

Answers (1)

Bill P
Bill P

Reputation: 3618

You can set the active tab as active like this:

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

and show the active content:

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

Upvotes: 1

Related Questions