从控制器中选择 Angular Bootstrap 静态选项卡

Question

我有一组静态角度引导选项卡：

<tabset>
  <tab heading="Static title" select="remember(0)">Static content</tab>
  <tab heading="Another title" select="remember(1)">Static content</tab>
  <tab heading="Another title" select="remember(2)">Static content</tab>
</tabset>

我创建了一个函数来存储上次选择的选项卡。但是，我似乎找不到从控制器选择给定选项卡的方法。

网站上的示例是带有 动态 选项卡的，由中继器中的数组创建。那么像$scope.tabs[0].active = true; 这样的东西就足够了。

但是，这些选项卡只是标记而不是数组，并且没有说明如何（或是否）可以从控制器中选择这些选项卡之一。

如果可以的话，我更喜欢使用静态选项卡，因为我不想使用包含。

想法？我从 UI-Bootstrap here 分叉了这个例子。

Answer 1

您可以使用active 属性，类似于在输入上使用ng-model 的方式。例如

<tabset>
  <tab active="tabs[0].active" heading="Static title" select="remember(0)">Static content</tab>
  <tab active="tabs[1].active" heading="Another title" select="remember(1)">Static content</tab>
  <tab active="tabs[2].active" heading="Another title" select="remember(2)">Static content</tab>
</tabset>

Answer 2

我在使用 ui-bootstrap 时遇到的一个问题是它使用隔离范围的方式 - 根据我的经验，动态内容与 ui-bootstrap 选项卡结合使用时不太适合。

话虽如此，我已经分叉了你的plunker。关键是使用选项卡的active 属性并通过您的控制器进行管理。

根据评论，我连接了remember 函数来切换选项卡的状态。另外，我还设置了一个控制器init方法来从sessionStorage中拉取activeTab。

请参阅Plunker。

检查控制台输出以验证 activeTabs 状态是否正确维护