Angular Configuring Js ui.bootstrap Tabs

Question

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

<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 a tag in tabs. This is the result 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 a solution.

Thanks in advance.

Answer 1

You can use the uib-tab-heading directive inside uib-tab to have your own custom html header inside. After that, you can specify your html content inside the uib-tab-heading element, after which it will be enclosed inside the 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>