Angular Bootstrap - 默认选项卡处于活动状态(动态选项卡)

时间:2015-03-25 17:23:38

标签: angularjs twitter-bootstrap tabs directive

我对Angularjs Bootstrap选项卡有疑问。我希望默认情况下动态标签处于活动状态,但只要我在同一个标​​签集中有一个静态标签,我就不能这样做。

<tabset ng-init="tab.active = true">
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
        {{tab.content}}
    </tab>
    <tab heading="Static">
        Static
    </tab>
</tabset>

`

这是一个解释的傻瓜:

http://plnkr.co/edit/DfM6r4tznE9b0K8LqvF0?p=preview

我想要&#34;动态标题1&#34;默认选择。是否可以使用active指令或者我是否必须创建一个处理活动状态的函数?

1 个答案:

答案 0 :(得分:6)

试试这个。

<tabset>
  <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-init="tab.active = $index === 0">
    {{tab.content}}
  </tab>
  <tab heading="Static">
    Static
  </tab>
</tabset>

Working Plnkr