Exploring an AngularJS code snippet that generates tabs upon clicking the new button. However, there's an issue where the newly created tab doesn't become active or selected automatically after creation. It seems like the one before the last tab always remains active. Any insights on what might be causing this glitch?
Check out the live example on plnkr: https://plnkr.co/edit/1329tgGonObRQ6Drk75A?p=preview
HTML Code:
<!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 Section:
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){
});