5

Need to create nested tabs.

In a page there will be multiple Person id tabs as outer tabs and on clicking each tab it will open inner tabs like Home,Office etc., and on clicking inner tab - Home, the tab content will display.

Outertab: Person 1 Person2

Innertab: Home Office

Refering the site - http://angular-ui.github.io/bootstrap/ , created outer tabs with content. created 2 separate tabset but not able to give link between the two tabset.

Can someone help me how to write directive for nested tabs? Any reference links?

Improve this question

2 Answers 2

Reset to default
2

I believe that AngularUI Router is what you are looking for. The majority of UI-Router's power is in its ability to nest states & views. Follow the link I've provided and take a look at the section Nested States & Views.

This Plunker example incorporates AngularUI Router to achieve a similar functionality you are looking for.

[EDIT]

This layout composed of nested views is exactly what for the AngularUI Router is used for:

enter image description here

So TabsTemplate will dynamically render the first level of tabs (any number).

TabTemplate could be a template without any dynamic content as Home and Office tabs are always there.

OfficeTemplate and HomeTemplate are again templates that are populated dynamically based on the selection of the current person.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks for the reference site. In my single page application requirement the outer tabs are dynamic that is, the number of Person ids to be displayed changes based on the user click in the previous page.And the inner tabs are static that is Home, Office are always displayed for each Person id outer tab.In this case is it possible to create separate html pages as mentioned in the reference site? Please correct me if my understanding about ui-route is not correct.
I am not sure I understand you 100%. Please take a look at the updated answer.
yes. this is what i need exactly. I am building single page application using ng view and routing to different pages. Can I use ui-router and ng view together?
AngularUI Router has its own directive ui-view but the purpose is exactly the same. You can find explanation and examples on the link that I provided in the answer.
This deserves to be awarded the answer (and did not even get an up-vote from the OP)
|
0

You can refer to how angular bootstrap tabset directive is written.

Reading the tab code helped me understand how directive work. Now I can build many components from the ground up.

I build myself a simpler version of the tabset directive, it doesn't render the content, just the tab-heading element. So I can decide what inside the content via a tab selected callback. And for nested tabs, I just need to put in another tabset directive.

Improve this answer

1 Comment

Thanks. Using bootstrap ui tabset and tabs, build the static page of my requirement in the Plunker - plnkr.co/edit/qQD9RY0Qa1XO0RlJxJou?p=preview. I need to write custom directive to make the inner tabs within the parent tabs and on closing the parent tab,both the parent and inner tab to be closed.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.