I wanted to do a browser like tabs but the event will be triggered inside a angular datatables (im using this one - angular-datatables). I have already setup the controller to listen on click per row to add a dynamic tab. But sadly, it does not add the tab. I logged the $scope.tabs array and found out that the tab was added but not on the <uib-tabset>. Please refer to the screenshot below;
Above screenshot shows the datatable, when i click the highlighted box (red) it was supposed to add a tab after "Dyanamic Title 1" tab and set it as active (or currently selected tab). How do i do this everytime i click a row it will add a dynamic tab?
Here is my controller for angularJS
controller.js
app.controller('mainCtrl',['$scope',
'API_URL',
'DTOptionsBuilder',
'DTColumnBuilder',
'$resource',
function($scope, API_URL, DTOptionsBuilder, DTColumnBuilder, $resource){
$scope.tabs = [
{ title:'Dynamic Title 1', content:'Dynamic content 1' },
];
$scope.model = {
};
var vm = $scope;
vm.dtOptions = DTOptionsBuilder.fromSource(API_URL+'employee')
.withPaginationType('full_numbers').withBootstrap()
.withOption('rowCallback', function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
$('td', nRow).unbind('click');
$('td', nRow).bind('click', function() {
$scope.tabs.push({
title: aData.empid,
content: 'Testing Content'
});
});
});
vm.dtColumns = [
DTColumnBuilder.newColumn('empid').withTitle('ID'),
DTColumnBuilder.newColumn('fname').withTitle('First name'),
DTColumnBuilder.newColumn('lname').withTitle('Last name'),
DTColumnBuilder.newColumn('position').withTitle('Position'),
DTColumnBuilder.newColumn('email').withTitle('Email'),
];
}]);
Here is my html
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Test</title>
<!-- Bootstrap -->
<link href="[[ asset('/css/bootstrap.min.css') ]]" rel="stylesheet">
<!-- Angular DataTables -->
<link href="[[ asset('/css/angular/angular-datatables.min.css') ]]" rel="stylesheet">
<link href="[[ asset('/css/angular/datatables.bootstrap.min.css') ]]" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="medrec">
<div class="container-fluid">
<div class="row">
<!-- header -->
</div>
<br/><br/><br/><br/><br/>
<div class="row">
<div class="col-md-12">
<div ng-controller="mainCtrl">
<uib-tabset active="active">
<uib-tab index="0" heading="Static title">
<table datatable="" dt-options="dtOptions"
dt-columns="dtColumns" class="table table-hover"
width="100%">
</table>
</uib-tab>
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
{{tab.content}}
</uib-tab>
</uib-tabset>
</div>
</div>
</div>
</div>
@include('templates.footer')
<!-- jQuery -->
<script src="[[ asset('/js/jquery.2.2.3.min.js') ]]"></script>
<!-- jQuery DataTables -->
<script src="[[ asset('/js/jquery.dataTables.min.js') ]]"></script>
<!-- AngularJS Library -->
<script src="[[ asset('/app/lib/angular.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-datatables.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-animate.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-route.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-touch.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-resource.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-sanitize.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular.ui-bootstrap.min.js') ]]"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="[[ asset('/js/bootstrap.min.js') ]]"></script>
<script src="[[ asset('/js/angular-datatables.bootstrap.min.js') ]]"></script>
<!-- AngularJS Modules -->
<script src="[[ asset('/app/app.js') ]]"></script>
<!-- AngularJS Config -->
<!-- script src="[[ asset('/app/config/route.js') ]]"></script -->
<!-- AngularJS Directives -->
<!-- script src="[[ asset('/app/controller/directive.js') ]]"></script -->
<!-- AngularJS Controllers -->
<script src="[[ asset('/app/controller/main-controller.js') ]]"></script>
</body>
</html>
