我将 AngularUI 与此代码一起使用:
<uib-tabset type="pills">
<uib-tab heading="Tab 1">Tab 1 content</uib-tab>
<uib-tab heading="Tab 2">Tab 2 content</uib-tab>
</uib-tabset>
我想以编程方式从我的角度控制器代码中更改当前的活动标签。例如,选择选项卡“2”以激活。
如何做到这一点?
我将 AngularUI 与此代码一起使用:
<uib-tabset type="pills">
<uib-tab heading="Tab 1">Tab 1 content</uib-tab>
<uib-tab heading="Tab 2">Tab 2 content</uib-tab>
</uib-tabset>
我想以编程方式从我的角度控制器代码中更改当前的活动标签。例如,选择选项卡“2”以激活。
如何做到这一点?
您需要在 ui-tabset 上使用 active 属性。然后,您需要在每个选项卡上都有索引才能从外部上下文中工作。
<uib-tabset type="pills" active="active">
<uib-tab heading="Tab 1" index="0">Tab 1 content</uib-tab>
<uib-tab heading="Tab 2" index="1">Tab 2 content</uib-tab>
</uib-tabset>
请参阅此工作 plnkr: 工作 Plnkr
我有同样的问题,这个答案帮助我弄清楚。
我在范围内使用了两个变量:$scope.showTabsInView
和$scope.activeTabIndex
.
默认值为:
$scope.showTabsInView = false;
$scope.activeTabIndex = 0;
首先,我加载了我的dynamic tabs
,然后我指定了 的值activeTabIndex
。然后我将值更改showTabsInView
为true。
<uib-tabset ng-if="showTabsInView" active="activeTabIndex">
<uib-tab data-ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab>
</uib-tabset>
如果您的情况不是那么复杂,dynamic tabs
您可以简单地忽略。$scope.showTabsInView