angular-ui-tabset: change active tab content

Question

I'm using ui-tab in my angular application. I have 2 tabs (tab1 and tab2) and I want to set tab1 as the active one programmatically when a button in the tab2.

This is my html code:

      <uib-tabset active="active"  justified="true">
        <uib-tab id="tab1" index="0" heading="Tab 1" ng-click="active= 0">
    <!-- content1 -->
        </uib-tab>
     <uib-tab id="tab2" index="1" heading="Tab 2" ng-click="active= 1">
    <!-- content2 -->
<button ng-click="goToTab1()"> Go to tab 1</button>
    </uib-tab>
  </uib-tabset>

And this is the goToTab1() implementation:

$scope.goToTab1 = function() {
            angular.element(document.querySelector("#tab1")).removeClass("active");
            angular.element(document.querySelector("#tab2")).addClass("active");
}

My problem:

When I click the button (in the tab2) the tab1 is selected but the displayed content still the tab2 content. Also when after that I click on the tab2, nothing happened until I click on the tab1 one more then if I click on the tab2 it works.

Edit

I have already tried the solution in that issue, but I'm getting the same problem. Also when I change the active value directly in the ng-click, it has no effect at all

<button ng-click="active = 0"> Go to tab 1</button>

Possible duplicate of Angular UI bootstrap tabs - Can't change tabs with a button inside a tab — svarog
– svarog, Commented May 31, 2017 at 11:17
@svarog I tried the answer in the issue that you gave me but it doesn't work — Ne AS
– Ne AS, Commented May 31, 2017 at 11:33
ok, then edit your question and add your second attempt, this way your question won't duplicate the other one and won't eventually close — svarog
– svarog, Commented May 31, 2017 at 11:43

William Valhakis · Accepted Answer · 2017-05-31 11:52:07Z

0

<uib-tabset active="current"  justified="true">
  <uib-tab id="tab1" index="0" heading="Tab 1" ng-click="current = 0">
    <!-- content1 -->
  </uib-tab>
  <uib-tab id="tab2" index="1" heading="Tab 2" ng-click="current = 1">
    <!-- content2 -->
    <button ng-click="goToTab1()"> Go to tab 1</button>
  </uib-tab>
</uib-tabset>

$scope.goToTab1 = function() {
  $scope.current = 0;
};

edited May 31, 2017 at 11:52

answered May 31, 2017 at 11:21

William Valhakis

3702 silver badges8 bronze badges

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

1 Comment

William Valhakis Over a year ago

Maybe you're not using the controller where you've defined the function in the specific tabset snippet.

svarog · Accepted Answer · 2017-05-31 11:56:25Z

0

According to this question, you should refactor

<button ng-click="active = 0"> Go to tab 1</button>

To

<button ng-click="$parent.$parent.active = 0"> Go to tab 1</button>

I think a better apprache would be to used views/directives with their own scopes and hide/show them according to active

answered May 31, 2017 at 11:56

svarog

9,8855 gold badges66 silver badges79 bronze badges

Collectives™ on Stack Overflow

angular-ui-tabset: change active tab content

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related