Example to Create responsive AngularJS Dynamic Tabs using BootStrap

Example to Create responsive AngularJS Dynamic Tabs using BootStrap

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.

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 three 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.

tab

AngularJS-Dynamic-Tabs.htm

<!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 }}">
<h1>{{ item }}</h1>
<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'
};
});