Tutorial 13: Tabs in AngularJS | Working with tabs

In AngularJS by hfarazm51 Comments

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:

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:

 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:

 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:

Download Project files

Hope you like it. Please share my work.

Previous-Chapter-Buttonnext-AngularJS MVC

//