Angular Js ui.bootstrap选项卡自定义

时间:2016-08-24 07:02:53

标签: javascript jquery angularjs twitter-bootstrap angular-ui-bootstrap

我在我的项目中使用angular js ui.bootstrap,我想使用ui bootstrap添加标签。我正在使用ui.bootstrap指令作为标签。但是这个有角度的ui bootstrap标签里面没有ul li内容。

<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>

我想在标签中的标签内添加span标签。这是我想要的输出。

<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>

如果有人知道如何做到这一点,请帮我找出解决方案。

提前致谢。

1 个答案:

答案 0 :(得分:3)

您可以在uib-tab-heading中使用uib-tab指令在标题中包含您自己的自定义html。此后,您可以在uib-tab-heading元素中指定html内容,然后将其转换为标题页内的内容。

<强>标记

<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>