Angular Js ui.bootstrap tabs customization

Question

I am using angular js ui.bootstrap in my project and I want to add tabs using ui bootstrap. I am using ui.bootstrap directive for tabs. But there is no ul li content inside that angular ui bootstrap tag.

<uib-tabset active="active">
     <uib-tab index="0" heading="Static title 1">Static content 1</uib-tab>
     <uib-tab index="0" heading="Static title 2">Static content 2</uib-tab>
     <uib-tab index="0" heading="Static title 3">Static content 3</uib-tab>
</uib-tabset>

I want to add a span tag inside the a tag in tabs. This is the output I want.

<li ng-class="{active: active, disabled: disabled}" index="0" heading="Static title 1" class="ng-isolate-scope active">
   <a href="" ng-click="select()" uib-tab-heading-transclude="" class="ng-binding">
    <span class="badge">5</span>Static title 1
   </a>
</li>

If anyone knows how to do this, please help me find out the solution.

Thanks in advance.

Pankaj Parkar · Accepted Answer · 2016-08-24 07:28:03Z

4

You could use uib-tab-heading directive inside uib-tab to have your own custom html inside heading. Thereafter you can specified your html content inside uib-tab-heading element then that would be transcluded inside tab header.

Markup

<uib-tabset active="active">
    <uib-tab index="0" heading="Static title 1">
        <uib-tab-heading>
            <span class="badge">5</span>Static title 1
        </uib-tab-heading>
    </uib-tab>
    <uib-tab index="0" heading="Static title 2">
        <uib-tab-heading><b>
        <span class="badge">5</span>Static title 3

    </uib-tab>
    </uib-tab>
    <uib-tab index="0" heading="Static title 3">
        <uib-tab-heading><b> memory utilization </b>
            <span class="badge">5</span>Static title 3
        </uib-tab-heading>
    </uib-tab>
</uib-tabset>

answered Aug 24, 2016 at 7:28

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Raj Over a year ago

Thanks Pankaj . :)

Collectives™ on Stack Overflow

Angular Js ui.bootstrap tabs customization

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related