Angularjs UI bootstrap dynamically select among static tabs not working

Question

I have three static tabs and a button that with ng-click="selectThirdTab()"

<div ng-controller="Ctrl">
        <input type="button" value="Select third tab" ng-click="selectThirdTab()" />
        <tabset justified="true">
            <tab heading="First" active="isFirstActive"></tab>
            <tab heading="Second" active="isSecondActive"></tab>
            <tab heading="Third" active="isThirdActive"></tab>
        </tabset>
</div>

function "selectThirdTab" is as follows:

$scope.selectThirdTab = function () {
    $scope.isThirdActive = true;
}

the plunker is here: Plunker

Initially the first tab is selected, you click on the button and the result is the the third button selected. Now if you select an other tab and then click on the button "Select third tab" again, then the third button does not get selected. What's wrong?

Der Zinger · Accepted Answer · 2015-04-23 12:56:10Z

9

Or you can go that way:

angular.module('plunker', ['ui.bootstrap']);
var Ctrl = function ($scope, $timeout) {
    $scope.isActive = [{active:true},{active:false},{active:false}];
    $scope.selectThirdTab = function () {
          $scope.isActive[2].active = true;
    }
}

and in html

    <tabset justified="true">
        <tab heading="First" active="isActive[0].active"></tab>
        <tab heading="Second" active="isActive[1].active"></tab>
        <tab heading="Third" active="isActive[2].active"></tab>
    </tabset>

answered Apr 23, 2015 at 12:56

Der Zinger

5558 silver badges13 bronze badges

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

Comments

Michael Kang · Accepted Answer · 2014-06-11 08:29:08Z

2

Only one tab may be active at a time:

$scope.selectThirdTab = function () {
    $scope.isThirdActive = true;
    $scope.isSecondActive=false;
    $scope.isFirstActive=false;
}

answered Jun 11, 2014 at 8:29

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Comments

getty_advaanz · Accepted Answer · 2014-06-11 09:05:54Z

1

You just replace the following code

   $scope.selectThirdTab = function () {
      $scope.isThirdActive = true;
   }

by

$scope.selectThirdTab = function () {
   $scope.isFirstActive=false;
   $scope.isSecondActive=false;
   $scope.isThirdActive = true;
}

Hope it will help you.

I guess this example can help you. http://plnkr.co/edit/7XvmsjAZ1DrA0K4F6kiw?p=preview

edited Jun 11, 2014 at 9:05

answered Jun 11, 2014 at 8:41

getty_advaanz

313 bronze badges

Collectives™ on Stack Overflow

Angularjs UI bootstrap dynamically select among static tabs not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related