UIB 选项卡集不起作用答案

【问题标题】：UIB tabset is not workingUIB 选项卡集不起作用
【发布时间】：2016-12-12 05:58:27
【问题描述】：

<div class="ui-tab-container">
    <uib-tabset>
        <uib-tab heading="Region Wise" index="region" active="region_wise">Tab 1</uib-tab >
        <uib-tab heading="Branch Wise" index="branch" active="state_tab">Tab 2</uib-tab>
        <uib-tab heading="City Wise" index="city" active="city_tab">Tab 3</uib-tab>
        <uib-tab heading="Counter Wise" index="counter" active="counter_tab">Tab 4</uib-tab>
    </uib-tabset>
</div>

没有显示任何选项卡，当我切换到引导选项卡集时，它们工作正常，但我无法在单击第一个选项卡上的按钮时从一个选项卡切换到另一个选项卡，即使我将该选项卡的 active 属性设置为 true在按钮的功能内（点击时） “引导程序”：“〜3.3.0” “角度引导”：“~2.3.1” 提前致谢。

【问题讨论】：

请包含您的相关javascript

标签： javascript html angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

试试这个

<uib-tabset active="'region'">
    <uib-tab heading="Region Wise" index="'region'" active="region_wise">Tab 1</uib-tab >
    <uib-tab heading="Branch Wise" index="'branch'" active="state_tab">Tab 2</uib-tab>
    <uib-tab heading="City Wise" index="'city'" active="city_tab">Tab 3</uib-tab>
    <uib-tab heading="Counter Wise" index="'counter'" active="counter_tab">Tab 4</uib-tab>
</uib-tabset>

您忘记将active 指令添加到uib-tabset 并给它一个值

active（默认值：第一个选项卡的索引）- 选项卡的活动索引。将此设置为现有选项卡索引将使该选项卡处于活动状态。

另外，您没有在 uib-tab 元素中实例化 active 值

标签索引。必须是唯一的数字或字符串。

所以它应该是这样的index="'region'"（注意里面的单撇号，索引需要一个表达式！！）或者index="1"

plunk

【讨论】：

这是可以理解的。我玩过它，但是当我将它恢复到上述格式时，它也能正常工作。我的问题是它没有被加载。我看不到标签标题。没有标签的迹象！
您是否在 index.html 中的 angular 脚本之后包含了 ui-bootstrap 脚本？
是的，先生。

【解决方案2】：

据我了解 ui-tab 中的指令 active 必须与模型中的某个布尔变量绑定。

<uib-tab ... active="boolean_variable_to_bind">...</uib-tab >

【讨论】：