logo标签列表

Angular Bootstrap - 默认标签页激活（动态标签页）

angularjstwitter-bootstraptabsdirective
6

我在使用Angularjs Bootstrap Tabs时遇到了问题。我希望默认情况下动态选项卡是活动的，但是当我在同一个选项卡集中有一个静态选项卡时，似乎我无法实现这一点。

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

这里有一个 plunkr 来解释：

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

我希望 "Dynamic Title 1" 默认被选中。是否可以使用 `active` 指令来实现，或者我需要创建一个函数来处理激活状态？

1个回答
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

非常感谢！它完美地运行了。你是怎么找到如何做的？直接在指令代码中吗？ - Templar
哎呀，新问题，它弄坏了一些东西。现在我无法从控制器中更改活动状态。。Plnkr链接：http://plnkr.co/edit/xV7OlVBkYYOv44IdsUHa?p=preview点击“New”，活动状态不会更改为新创建的选项卡。如果去掉ng-init，它就可以工作。有什么想法吗？ - Templar
使用$timeout来更新新添加的选项卡。更新后的plnkr：http://plnkr.co/edit/9N4RMaasrG8stw37bHKH?p=preview - Vinay K
哇，谢谢你的快速回答，它有效了！我在这里学到了很多 :) - Templar
很高兴能帮助你。如果有帮到你，请点赞.. :) - Vinay K
@daveoncode 这个库确实很烂。但我认为这主要是因为Angular本身就是一个污水池。 - Ronnie Overby
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接