Tutorial 13: Tabs in AngularJS | Working with tabs

In AngularJS by Administrator17 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

//

  • Shahzad Ashraf

    wooooooooooooooo..that’s cool..

  • Manoj

    nice one

  • Manoj

    what will be next one?

    • Hafiz Faraz Mukhtar

      in two days.

      • Manoj

        ok thats good 🙂

  • Shahzad Ashraf

    when the nest is comming??and what is the topic of next tutorial?

  • Blake

    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?

    • Hafiz Faraz Mukhtar

      well that is even better..

  • Darek

    Hafiz, Is there any way to call other html page inside tab?

  • Arthur

    What if I need another tab inside one of the tabs. I think this solution won’t work.

    • Arthur

      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!

  • Benson Zhang

    Im not sure what to say but why would you use ng-show??? You should either use ngRouter or ui-router.

  • Deeksha

    hafiz sir can you let me know that how it will implement on visual studio 2012 because that are 2 Js file that is controller and app.js ..it become difficult to understand where entry should be and the flow of Tab, ???

  • Jorge Casariego

    Nice Tuto!!