CODEWITHSUNDEEP
twitter-bootstrapangularjsangularjs-directive
user1669811
user1669811

Reputation: 835

how to set active on angularjs bootstrap tab with static content

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?

Upvotes: 2

Views: 3124

Answers (1)

James
James

Reputation: 11931

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.

Upvotes: 1

Related Questions