Active tab in angular js doesn't work using UI-Bootstrap 0.11.0

Question

I am trying to work with angular js bootstrap tabs. Whenever i add or remove the tabs, i want the last tab to get active. This works fine. But whenever i try to select a particular tab and then add/remove it does not select the last tab as active tab. Following is the running example of it.

http://plnkr.co/edit/abntin0l7D8FCzGb7tqs?p=preview

Following is my html code:

<html ng-app="plunker">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
  <script src="script.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="container" ng-controller="CustomizationCtrlr">

    <tabset>
      <tab sortable-tab ng-repeat="tab in tabs" ng-click="onTabChanges($index)" active="activeTabIndex">
        <tab-heading>

          <span> {{tab.Name}}</span><a ng-click="removeStep($index)"><i class='glyphicon glyphicon-remove' ng-click="removeTab($index)" ng-hide="tabs.length==1"></i></a>
        </tab-heading>

      </tab>

      <i class="glyphicon glyphicon-plus" ng-click="addTab(tTitle)"></i>

    </tabset>
  </div>
</body>

</html>

Following is my js code:

// Code goes here
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('CustomizationCtrlr', function ($scope, $timeout) {

 //Tabs
  $scope.AddedWorkFlowTabs = 0;
   $scope.StepCount = 0;
    var tabs = [{
        "ID": $scope.AddedWorkFlowTabs++,
        "Name": "Step " + $scope.StepCount++,
        "Customizations": {QuestionGroups : []}

    }],
    IsSameNameTab = false, 
    selected = null,
    previous = null;
    $scope.tabIndex = 0 ;
     $scope.activeTabIndex = 0 ;
    $scope.tabs = tabs;
    $scope.selectedIndex = 0;

   $scope.onTabChanges = function(tabIndex) {
        //you can add some loading before rendering
        callTimeOut(tabIndex +1 );

        $scope.currentTab =  $scope.tabs[tabIndex];
        //$scope.activeTabIndex = tabIndex +1;
    };

    $scope.addTab = function (title, view) {
        //angular.forEach(tabs, function (tb, key) {
        //    if (tb.Name == title) {
        //        IsSameNameTab = true;
        //        showToastrMessage('error', 'You cannot create a step with same name.!');

        //    }
        //});

        //if (!IsSameNameTab) {

        $scope.WorkFlow = {
            "ID": $scope.AddedWorkFlowTabs++,
            "Name": "Step " + $scope.StepCount++,
            "Customizations": {QuestionGroups : []}

        }

        $scope.tabs.push($scope.WorkFlow);
        //$scope.activeTabIndex = ($scope.tabs.length );
        $scope.currentTab =$scope.WorkFlow;
        $scope.tabIndex = $scope.tabs.length-1;

        callTimeOut($scope.tabs.length);
        //}    
        //IsSameNameTab = false;
    };

    function callTimeOut(tabNoIndex) {

        $timeout(function() {
            $scope.activeTabIndex = tabNoIndex;
            $scope.tabIndex = ($scope.activeTabIndex-1);
        }, 0);

    }

    $scope.removeStep = function (index) {


        $scope.tabs.splice(index, 1);

        callTimeOut($scope.tabs.length);


    };
});

Can someone please help in identifying what am i doing wrong?

Steps to reproduce :

Add four new tabs
Select second tab
Remove third Tab

you are using a very old version of ui-bootstrap ! try newer version. — Rathma
– Rathma, Commented Dec 26, 2017 at 18:03
...Or dont use ui-* directives when dealing with tabsets at all; just get the markup right and manipulate the attributes yourself. — davidkonrad
– davidkonrad, Commented Dec 26, 2017 at 18:58
The latest version of UI-Bootstrap is 2.5.6. Availble on UNPKG as unpkg.com/angular-ui-bootstrap/ui-bootstrap-tpls.js — georgeawg
– georgeawg, Commented Dec 26, 2017 at 21:02

The.Bear · Accepted Answer · 2017-12-27 00:49:19Z

1

In the way that you're using your tabs with active="selectedIndex", you need to at least update you ui-bootstrap to version >= 1.2.0 and add a uib- prefix to all your directives. (e.g: <uib-tabset>, <uib-tab>, etc). See this answer to know how to do it.

Anyways, how can achieve this with ui-boostrap version <= 1.2.0 ?

The main difference is that active is a boolean so you need to add a dynamic property in you repeat like active="tab.active". Here you are your updated plunker

HTML (important parts)

<tabset>
  <tab ng-repeat="tab in tabs" active="tab.active">
    <!-- Rest of the tab header code -->
    <a ng-click="removeTab($index)" ng-hide="tabs.length==1">Remove</a>
  </tab>

  <a ng-click="addTab()">Add</a>
</tabset>

JS

$scope.addTab = function() {
  $scope.tabs.push({"ID": $scope.id++, "Name": "Step " + $scope.tabNumber++});
  setLastTabActive();
}

$scope.removeTab(index) {
  $scope.tabs.splice(index, 1);
  setLastTabActive();
}

function setLastTabActive() {
  $scope.tabs[$scope.tabs.length - 1].active = true;
}

edited Dec 27, 2017 at 0:49

answered Dec 27, 2017 at 0:27

The.Bear

5,8952 gold badges31 silver badges34 bronze badges

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

2 Comments

Sana Over a year ago

I have upgraded to the version 2.0.0 but in it too the active functionality doesnt work

The.Bear Over a year ago

I will update my awnser for newer versions with a plunker so you can see what you're doing wrong

Collectives™ on Stack Overflow

Active tab in angular js doesn't work using UI-Bootstrap 0.11.0

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related