how to set active on angularjs bootstrap tab with static content

Question

I am using Angular Bootstrap UI to show a tabset with static content. The bootstrap script I include is ui-bootstrap-tpls-0.6.0.min.js.

here is my markup:

<tabset>
    <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>

Here is the controller

function myController($scope) {
    $scope.hideme = false;
});

If I don't have ng-class applied on the tab, it works well except that when the 1st tab hide and 2nd tab show ($scope.hideme = false), the content of the 1st tab will show avtive.

If I added ng-class, it caused an error in angularjs. Error: [$parse:syntax] http://errors.angularjs.org/undefined/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=16&p3=%7Bactive%3Afalse%7D%20%7Bactive%3A%20active%2C%20disabled%3A%20disabled%7D&p4=%7Bactive%3A%20active%2C%20disabled%3A%20disabled%7D

What is the right way(or right syntax) to make the specific tab active?

Not sure why you are using $parent....can you include more of your HTML & Angular code? — kmdsax
– kmdsax, Commented Oct 7, 2013 at 19:06

James · Accepted Answer · 2014-11-11 22:24:09Z

1

I recommend not trying to do the show/hide logic. I was also frustrated by this because the UI Bootstrap Tab documentation only shows navigation to tabs created by binding with ng-repeat.

But I believe you can reference the tabs in the tabset directive as $parentScope.tabs. So simple navigation is possible using $parent.tabs[2].select():

<tabset>
  <tab heading="Tab 1">
    <button class="btn btn-success" ng-click="$parent.tabs[2].select()">Go to Tab 3</button>
  </tab>
  <tab heading="Tab 2">
    <p>Tab 2 contents</p>
  </tab>
  <tab heading="Tab 3">
    <button class="btn btn-danger" ng-click="$parent.tabs[0].select()">Back to Tab 1</button>
  </tab>
</tabset>

I have a working Plunker example if that helps.

answered Nov 11, 2014 at 22:24

James

12k2 gold badges38 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nisar Over a year ago

HI.. thanks for answer... this is working with older version of bootstrap.. and in current version it's not..

James Over a year ago

@Nisar, which versions of bootstrap, angular and ui-bootstrap are you using?

Nisar Over a year ago

I am using (0.14.3) version of ui-bootstrap.. I have also made a Plunker of it ... plnkr.co/edit/kzg9ITOiubLuZwkw3TmY?p=preview

James Over a year ago

I think you may have version incompatibilities between Angular 1.2.x and ui-bootstrap 0.14.3, which I believe works only with Angular 1.3.x and higher (see Milestones). I made a modified Plunk with the updated version, and it seems to work again.

Faizan Shakeel Over a year ago

anyone has any idea how to make a tab active programmatically? for example on click of a button??

Collectives™ on Stack Overflow

how to set active on angularjs bootstrap tab with static content

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related