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的方式。 e.g。

<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状态是否正确维护

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

2 个答案: