Angular Js ui.bootstrap 选项卡自定义

Posted 2023-05-08

【中文标题】Angular Js ui.bootstrap 选项卡自定义

【英文标题】：Angular Js ui.bootstrap tabs customization

【发布时间】：2016-12-31 04:29:28

【问题描述】：

我在我的项目中使用 angular js ui.bootstrap，我想使用 ui bootstrap 添加选项卡。我正在为标签使用 ui.bootstrap 指令。但是那个有角的 ui 引导标签内没有 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>

我想在标签的 a 标签内添加一个 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】：

您可以在uib-tab 中使用uib-tab-heading 指令在标题中添加您自己的自定义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>

【讨论】：

感谢 Pankaj。 :)