CODEWITHSUNDEEP
angularjstabsangular-ui-bootstrap
miks87
miks87

Reputation: 193

Building Angular-ui Bootstrap tabs with ad hoc uib-tabset, uib-tab tag elements

I'm writing my nice tabs panel with angular-ui bootstrap directives. Therefore I've included in my project, under a folder called "templates" the two html templates: tab.html and tabset.html. Their code, as it can be found also on GitHub is:

tab.html

<li ng-class="{active: active, disabled: disabled}" class="uib-tab nav-item">
    <a href ng-click="select()" class="nav-link" uib-tab-heading-transclude>{{heading}}</a>
</li>

tabset.html

<div>
    <ul class="nav nav-{{tabset.type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
    <div class="tab-content">
         <div class="tab-pane"
         ng-repeat="tab in tabset.tabs"
         ng-class="{active: tabset.active === tab.index}"
         uib-tab-content-transclude="tab">
         </div>
     </div>
</div>

In my html file, in order to build the tabs panes, I have the following code:

<uib-tabset>
    <uib-tab heading="Profile">
        <ng-include src="'components/dashboard/profile_tab.html'"></ng-include>
    </uib-tab>
    <uib-tab heading="Projects">
        <ng-include src="'components/dashboard/projects_tab.html'"></ng-include>
     </uib-tab>
     <uib-tab heading="Quotes">
        <ng-include src="'components/dashboard/quotes_tab.html'"></ng-include>
     </uib-tab>
     <uib-tab heading="Reviews">
        <ng-include src="'components/dashboard/reviews_tab.html'"></ng-include>
     </uib-tab>
</uib-tabset>

Now, the thing is that the tab.html template is correctly used, and I see all my tabs heading, as specified in my html file. However, I don't see any of the tabs content.

By playing with the content of tabset.html, I've managed to load the 4 tabs content, substituting the ng-repeat="tab in tabset.tabs" with ng-repeat="tab in tabs" (don't ask me why it works cause I don't know...) but the tabs content display all together, since they all happen to have the active class applied... any clue what I'm doing wrong?? Thanks!

Upvotes: 2

Views: 1620

Answers (1)

miks87
miks87

Reputation: 193

I finally got it working, after several hours and thanks to the amazing ng-inspector Chrome plugin, which I wasn't aware of and I strongly recommend to anybody coding in AngularJS, especially if newbee like me. The problem happears to be indeed in the template tabset.html, I changed it this way and it worked

<div>
    <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
    <div class="tab-content">
        <div class="tab-pane"
             ng-repeat="tab in tabs"
             ng-class="{active: tab.active}"
             uib-tab-content-transclude="tab">
        </div>
    </div>
</div>

Upvotes: 1

Related Questions