Dynamic Tab Switch control using angular JS, using nc-class, ng-click, ng-show and few custom functions in angular can make your life easy as you can reduce some line of codes which you would have to write in JQuery. Angular Will make it easy to create tabs based content display easy.
Recently We were working on a project where we need to provide tabbed content. Fortunately we had scope of AngularJS in the project and the whole tab system become piece of a cake, which other wise would involve some JQuery based show and hide stuff. We only wrote about 10 little line of code in angular and boom, its done. This is what we are going to demonstrate in this article.
Assuming that you already have some knowledge of AngularJS. We are going to proceed to the functional logic of our target application.
angular.module('tabsApp',[]).controller('tabsController',['$scope',function($scope){
$scope.active = 1;
$scope.selectTab = function(value){
$scope.active = value;
}
$scope.isActive = function(value){
if($scope.active==value){
return true;
}
else{
return false;
}
}
}]);
In the code above we have defined a variable field ‘active’ which keeps track of the currently active tab, and to make sure on the page lode one of tab is active we gave it a value. Later on there are two functions, selectTab() is to switch between the tabs and isActive() to keep track of currently active tab. As you can see the first function assigns the value to variable and second one compare the passed value to currently assign value, this is the key of tabs switching. Now let us take a look on the front end of the application.
<div class="container">
<ul class="nav nav-tabs">
<li role="presentation" ng-click="selectTab(1)" ng-class="{active:isActive(1)}"><a href="javascript:void(0);">Tab 1</a></li>
<li role="presentation" ng-click="selectTab(2)" ng-class="{active:isActive(2)}"><a href="javascript:void(0);">Tab 2</a></li>
<li role="presentation" ng-click="selectTab(3)" ng-class="{active:isActive(3)}"><a href="javascript:void(0);">Tab 3</a></li>
</ul>
<div ng-show="isActive(1)">
This is content under Tab 1
</div>
<div ng-show="isActive(2)">
This is content under Tab 2
</div>
<div ng-show="isActive(3)">
This is content under Tab 3
</div>
</div>
In the code above We have used the Tabs as we are using the bootstrap css to do the basic designing thus you can see some classes over there. There are three tabs and three divs holding the content of those three tabs. The logic is to show or hide the divs using isActive() function which returns a boolean value which we can feed to ng-show directive. In the tabs we have used the selectTab() function with ng-click to change the tab value. ng-class directive is used to apply the active class to currently active tab and hence to show which tab is active currently.
Isn’t it so easy to do it with AngularJS and its directives ? Here we give you the complete code and then the link of working demo of this tabbed application.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>
Tabs Switching Demo using AngularJs
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body ng-app="tabsApp" ng-controller="tabsController">
<div class="container">
<ul class="nav nav-tabs">
<li role="presentation" ng-click="selectTab(1)" ng-class="{active:isActive(1)}"><a href="javascript:void(0);">Tab 1</a></li>
<li role="presentation" ng-click="selectTab(2)" ng-class="{active:isActive(2)}"><a href="javascript:void(0);">Tab 2</a></li>
<li role="presentation" ng-click="selectTab(3)" ng-class="{active:isActive(3)}"><a href="javascript:void(0);">Tab 3</a></li>
</ul>
<div ng-show="isActive(1)">
This is content under Tab 1
</div>
<div ng-show="isActive(2)">
This is content under Tab 2
</div>
<div ng-show="isActive(3)">
This is content under Tab 3
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module('tabsApp',[]).controller('tabsController',['$scope',function($scope){
$scope.active = 1;
$scope.selectTab = function(value){
$scope.active = value;
}
$scope.isActive = function(value){
if($scope.active==value){
return true;
}
else{
return false;
}
}
}]);
</script>
</body>
</html>
