This tutorial is about angularjs tabs, for this we need to continue working on the example from previous tutorial. You can download required files here. Lets add some more interactivity to our application by adding some tabs. We will add tabs in guitar details.html page which holds detail about selected guitar. There will be three tabs namely description, specifications and reviews. But wait wait, first lets create a simple tab angular app then will use another approach to use this tab in our guitar application, on which we were working. So here is simple tab app:
<!doctype html>
<html ng-app>
<head>
<title> AngularJS Tabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" ></script>
<style>
p {
font-size: 22px;
font-weight: bold;
font-style: italic;
color: rgb(62, 62, 62);
margin: 18px;
}
ul {
float: left;
border-radius: 5px;
border: solid 1px rgb(198, 198, 198);
padding: 7px 11px;
background-color: rgb(248,248,248);
}
li {
float: left;
background-color: rgb(200,200,200);
padding: 5px 19px;
margin: 5px 2px 5px 0px;
color: black;
list-style: none;
}
li:hover, li:hover a {
background-color: rgb(6,179,6);
color:white;
}
li a {
text-decoration: none;
color: white;
font-size: 21px;
font-style: italic;
text-shadow: 1px 0px 3px rgb(157, 157, 157);
}
li:nth-child(1) { border-radius: 4px 0px 0px 4px; margin-left: 1px;}
li:nth-child(3) { border-radius: 0px 4px 4px 0px;}
.active {
background-color: rgb(6,179,6);
}
</style>
</head>
<body>
<section>
<ul ng-init="tab = 1">
<li ng-class="{active:tab===1}">
<a href ng-click="tab = 1">What you eat?</a>
</li>
<li ng-class="{active:tab===2}">
<a href ng-click="tab = 2">Favorite juice?</a>
</li>
<li ng-class="{active:tab===3}">
<a href ng-click="tab = 3">Do you close your eyes?</a>
</li>
<br><br>
<p ng-show="tab === 1"> I eat chocolates, alive! </p>
<p ng-show="tab === 2"> I drink pulpy orange juice, mango milk shake... </p>
<p ng-show="tab === 3"> yeah, I sleep at weekend. I am human... :D</p>
</ul>
</section>
</body>
</html>
Code Explanation:
In html tag, we told that this is going to be an angularJS app, then included angularJS and defined some styles. Inside li tag, lets first goto to anchor tag then I will explain other things. Anchor tag is assigning tab = 1 and then in another anchor tag tab = 2 and so on. This is basically a value to uniquely identify each tab(anchor tag), so that we know which one user clicked. Next, li tag has an angular class which is defined in css as .active {}. This active class can only be activated if that expression is true e.g if user clicked on anchor tag which has tab =1, then li style of active class will be activated. Next, I created three paragraph tags which are holding some information. They have ng-show directive that will show paragraph content only if tab condition is met e.g if clicked anchor tag has tab value of 1 then first paragraph condition is met and it will show content of first paragraph and hide the rest of paragraphs. See it in action below:
Now we know how to work with tabs in AngularJS, lets implement it in another way(because it would be better to separate the logic from angularJS, so that code looks cleaner and can be managed easily in future) to our existing guitar application from previous tutorial. To separate the logic we need another controller in controllers.js file but first lets goto details.html file which is holding guitar detail and make a basic structure of tabs for our guitar application. Add following code after <p> {{guitarVariable[whichGuitar].description}}</p>, like this:
<section class="tab" ng-controller="TabController as panel">
<ul>
<li ng-class="{active:panel.isSelected(1) }">
<a href ng-click="panel.selectTab(1)">Description</a>
</li>
<li ng-class="{active:panel.isSelected(2) }">
<a href ng-click="panel.selectTab(2)">Specifications</a>
</li>
<li ng-class="{active:panel.isSelected(3)}">
<a href ng-click="panel.selectTab(3)">Reviews</a>
</li>
</ul>
<br />
<div ng-show="panel.isSelected(1)">
<p class="longDescription"> {{guitarVariable[whichGuitar].longDescription}}</p>
</div>
<div ng-show="panel.isSelected(2)">
<p class="longDescription"> {{guitarVariable[whichGuitar].specifications}}{{guitarVariable[whichGuitar].name}}</p>
</div>
<div ng-show="panel.isSelected(3)">
<p class="longDescription"> {{guitarVariable[whichGuitar].price}}</p>
</div><br />
</section>
Code Explanation:
This code looks identical to simple tabs example(just above it) but there are some different things in it. Lets compare it with example above. First, in section tag I have used a controller called TabsController and used panel as alias. Next, ul tag have no tab initialization (means when our details page is loaded it shows us the first tab by default instead of nothing before clicking any tab). I shall do this tab initialization in TabsController in a moment. Next, I used ng-class, which has a class name of ‘active’ and a function call to evaluate. This means that, when the function is true set the active class style to li tag. Next, in anchor tag, I used panel alias to pass a value to function. At the end, I have three div, in which I used the same function I used in li tag above , which says, show me this div on when panel.isSelected returns true.
Lets make controller for our tabs, like this in controllers.js file:
GuitarControllers.controller('TabController', function (){
this.tab = 1;
this.selectTab = function (setTab){
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
Code Explanation:
this.tab=1 says initialize tab 1 when application is loaded. Next, there are two functions, one is setting tab and the other one checking which tab is selected and returning that tab to true.
And I have made some changes and added new styles in styles.css file. You need to update your styles.css file too. Download styles.css
Demo
Here is how final app looks like (click on guitar to go to details page. There you will find tabs):
Video Tutorial:
Hope you like it. Please share my work.
//
42 Responses
wooooooooooooooo..that’s cool..
wooooooooooooooo..that’s cool..
wooooooooooooooo..that’s cool..
nice one
thanks
nice one
thanks
nice one
thanks
what will be next one?
in two days.
ok thats good 🙂
what will be next one?
in two days.
ok thats good 🙂
what will be next one?
in two days.
ok thats good 🙂
when the nest is comming??and what is the topic of next tutorial?
when the nest is comming??and what is the topic of next tutorial?
when the nest is comming??and what is the topic of next tutorial?
I like this, but maybe perhaps initialize the tabs within the tab’s controller and not within the HTML. Does this approach that is here promote a less dry/semantic coding practice or is this fine?
well that is even better..
I like this, but maybe perhaps initialize the tabs within the tab’s controller and not within the HTML. Does this approach that is here promote a less dry/semantic coding practice or is this fine?
well that is even better..
I like this, but maybe perhaps initialize the tabs within the tab’s controller and not within the HTML. Does this approach that is here promote a less dry/semantic coding practice or is this fine?
well that is even better..
Hafiz, Is there any way to call other html page inside tab?
yes you can do it using custom directives, check out http://localhost/bloghfarazm/custom-directives-in-angularjs/
Hafiz, Is there any way to call other html page inside tab?
yes you can do it using custom directives, check out http://localhost/bloghfarazm/custom-directives-in-angularjs/
Hafiz, Is there any way to call other html page inside tab?
yes you can do it using custom directives, check out http://blog.hfarazm.com/custom-directives-in-angularjs/
What if I need another tab inside one of the tabs. I think this solution won’t work.
Update: Just checked and it works well with inner tabs. What can I say : Wow this is really much easier and faster to code than via jQuery. Thaks for the lesson!
Thanks 🙂
What if I need another tab inside one of the tabs. I think this solution won’t work.
Update: Just checked and it works well with inner tabs. What can I say : Wow this is really much easier and faster to code than via jQuery. Thaks for the lesson!
Thanks 🙂
What if I need another tab inside one of the tabs. I think this solution won’t work.
Update: Just checked and it works well with inner tabs. What can I say : Wow this is really much easier and faster to code than via jQuery. Thaks for the lesson!
Thanks 🙂