During web application development many times we required to implement dynamic tab for better user experience. In this example I am sharing the codes to create AngularJS Dynamic Tabs using BootStrap. Here to show you a demo I created 4 states of India as the tabs. Under each tab I am showing the cities for that for that particular state dynamically.
AngularJS directive
The AngularJS directive here I create for my tab control is ngTab. Which accepts two parameters length & data. Length is the number of tabs we required. When data is the states & it’s cities. Data is in JSON format. You can replace this data as per your requirements. To get these parameters values in AngularJS ngTab directive I am using scope: { “length”: ‘=’, “data”: ‘@’ }. You can watch this in the below app.js file. To create responsive Tabs I used BootStrap here. my-tab.html is my template for ngTab. In template file I am binding the state & cities values (In form of array) from the scope object of TabModule.
To run this demo application you need to create 3 files as index.html, app.js & my-tab.html. Copy the below codes to the respective files. With internet connection run the index.html. It will show you the result like the below screen.
AngularJS Dynamic Tabs using BootStrap
<!DOCTYPE html>
<html ng-app="tabModule">
<head>
<meta charset="utf-8">
<title>Example to Create responsive AngularJS Dynamic Tabs</title>
<!--AngularJS library CDN link-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<!--Jquery library CDN link-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!--Jquery UI CDN link-->
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!--BootStrap CDN links-->
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-theme.min.css" type="text/css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
</head>
<body>
<ng-tab length="4" data='{"Country":[{"state":"Maharashtra", "cities":"Mumbai, Pune, Nagpur, Thane, Nashik"},{"state":"Odisha", "cities":"Bhubaneswar, Cuttack, Rourkela, Brahmapur, Sambalpur"},{"state":"Karnataka", "cities":"Bellary, Bidar, Gulbarga, Koppal, Raichur"},{"state":"Chandigarh", "cities":"Ludhiana, Amritsar, Jalandhar, Patiala, Bathinda"}]}'></ng-tab>
</body>
</html>
my-tab.htm
<!--ngTab Template-->
<h3><center>{{ appDetails }}</center></h3>
<div class="container">
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li ng-class="{active: $first}" ng-repeat="item in tempArrTab">
<a href="#{{ item }}" data-toggle="tab">{{ item }}</a>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div ng-repeat="item in tempArrTab" class="tab-pane" ng-class="{active: $first}" id="{{ item }}">
<h2>{{ item }}</h2>
<p>Welcome to {{ item }}. Visit Us.</p>
Cities : <input list="tags-{{ $index }}">
</div>
<div ng-repeat="compitem in tempCompArr">
<datalist id="tags-{{ $index }}">
<option ng-repeat="items in compitem.split(',')" value="{{ items }}">
</datalist>
</div>
</div>
</div>
</div>
app.js
/* ng-tab Module */
angular.module('tabModule', []).directive('ngTab', function() {
return {
restrict: 'E',
transclude: true,
scope: {
/* Accepting the number of Tab you want in your app */
"length": '=',
/* Accepting the data in JSON for Tab */
"data": '@'
},
link: function (scope, element) {
scope.$watch("length", function (arrlen) {
scope.$watch("data", function (value) {
var obj = JSON.parse(value);
var lenjson = obj.Country.length;
var arrTab = [];
var autoCompArray = [];
/* Assigning input JSON data to Array */
if (arrlen == lenjson) {
for(i=0; i<lenjson; i++) {
arrTab.push(obj.Country[i].state);
autoCompArray.push(obj.Country[i].cities)
}
} else {
alert('Please provide accurate data length.');
}
scope.tempArrTab = arrTab;
scope.tempCompArr = autoCompArray;
scope.appDetails = 'Create your own ng-tab using AngularJS';
}, false);
}, false);
},
controller: function($scope, $filter) {
$(function() {
$("#tabs").tabs();
});
},
templateUrl: 'my-tab.htm'
};
});
