Angularjs : Dynamically created tab does not get active/selected

Question

I have the below angularjs code which creates tabs by pressing the new button. But the newly created tab does not get active or selected after creation. Always the one before the last one get active ! Anyone knows what is wrong?

plnkr : https://plnkr.co/edit/1329tgGonObRQ6Drk75A?p=preview

HTML :

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
      <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
    <script src="example.js"></script>
         <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">



  </head>
  <body>

<div ng-controller="TabsParentController">


   <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
               Sure to delete?
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>


    <uib-tabset active="active">

        <uib-tab ng-repeat="workspace in workspaces"
             heading="{{workspace.name}}"
             >
            <div ng-controller="TabsChildController">
                <div>
                    {{$parent.workspace.id}} : {{ $parent.workspace.name}}
                </div>
                <input type="text" ng-model="workspace.name"/>
                 <button class="btn" type="button" ng-click="open('sm',workspace)">Delete</button>
            </div>     
        </uib-tab>
      <uib-tab index="0" select="addWorkspace()">
              <uib-tab-heading>
                <i class="glyphicon glyphicon-plus"></i>
            </uib-tab-heading>
        </uib-tab>
    </uib-tabset>
</div>
  </body>
</html>

Javascript :

var app = angular.module('plunker', ['ngAnimate','ui.bootstrap']);

app.controller("TabsParentController", function ($scope,$uibModal) {
  $scope.animationsEnabled = true;

  $scope.open = function (size, workspace) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {

         workspace: function () {
          return workspace;
        }

      }
    });

    modalInstance.result.then(function (selectedItem) {
       var index=$scope.workspaces.indexOf(selectedItem)
      $scope.workspaces.splice(index,1);     
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };



    var setAllInactive = function() {
         //angular.forEach($scope.workspaces, function(workspace) {
           // workspace.active = false;
   // });
    };
    var addNewWorkspace = function() {

        var id = $scope.workspaces.length+1 ;

        $scope.workspaces.push({
            id: id,

            name: "Workspace " + id,

        });
        $scope.active=$scope.workspaces.length -1;


    };

    $scope.workspaces =
    [

    ];

    $scope.addWorkspace = function () {
        setAllInactive();
        addNewWorkspace();

    };    


     $scope.remove=function(item){ 
      var index=$scope.workspaces.indexOf(item)
      $scope.workspaces.splice(index,1);     
    }

});

angular.module('plunker').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, workspace) {

  $scope.selectedworkspace = workspace;

  $scope.ok = function () {
    $uibModalInstance.close( $scope.selectedworkspace );
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});




app.controller ("TabsChildController", function($scope, $log){

});

How does this uib-tabset active="active" work? It seems like a directive, but I can't seem to find any directive definition in your code. — emil.c
– emil.c, Commented Mar 22, 2016 at 19:20
@emil.c its angularjs bootstrap tag, imported by : //angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js — user3033921
– user3033921, Commented Mar 22, 2016 at 19:32
@emil.c you import the JS library into html and use the directives to create controls, you can read more here: : angular-ui.github.io/bootstrap — user3033921
– user3033921, Commented Mar 22, 2016 at 19:36
I have indeed missed something because I haven't really understood the problem in depth. The answer is totally correct so sorry for misleading with my questions. — emil.c
– emil.c, Commented Mar 22, 2016 at 19:59

Ji_in_coding · Accepted Answer · 2016-03-22 19:46:42Z

3

If you want to the newest tab as active, you will want to set the

$scope.active = $scope.workspaces.length;

but the other problem is that, when you push a new workspace. it takes a bit of time for the directive to re-render the DOM and get all the scope variables ready. therefore right after push, if you attempt to assign the newest tab as active will result in error.

So, to quickly prove my point (no the most correct way), try this and your code to will work. Remember to inject $timeout as a dependency

app.controller("TabsParentController", 
    function ($scope,$uibModal, $timeout) {


        ....
        ....

        $scope.workspaces.push({
            id: id,
            name: "Workspace " + id,
        });

        //introduce a 50 ms delay before setting the active tab
        $timeout(function(){
           $scope.active = $scope.workspaces.length;
        }, 50);

        ....
        ....

    }
);

see it in plunker

answered Mar 22, 2016 at 19:46

Ji_in_coding

1,7011 gold badge14 silver badges17 bronze badges

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

4 Comments

user3033921 Over a year ago

Thanks for the answer, yes seems you are right. Is there a way to create a function that sets the active tab after successful completion of AddNewTab function? I am looking for something similar get.then or get or success which can call a function after successful completion of get ! is there such a thing for functions?

Ji_in_coding Over a year ago

@user3033921 when i first looked at your problem. I had the exact same question as emily.c. If you can wait for the directive to be ready then set the active, it would be most ideal. For that part you will probably need to look up the documentation yourself. My answer was a prove of concept that there is a bit of churning that you need to wait for. Cheers

Ji_in_coding Over a year ago

@user3033921 I have a feeling that your code is a modified version of OdeToCode's example. My gut feeling is telling me that the current set up does have some collision with the angular module you are importing, and it doesn't seem right. You should find some better examples of how to programmatically set tabs. I have not been using the angular version of bootstrap, and i can tell you there are many competitive alternatives out there. I would suggest Angular Material.

user3033921 Over a year ago

@ji_incoding thanks. I will look into this. I am new to angularjs

Collectives™ on Stack Overflow

Angularjs : Dynamically created tab does not get active/selected

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related