[英]Setting active tab on dynamically created tabs with Angular UI Bootstrap
I have a dynamic tabset that generates the tabs from an array which starts out blank. 我有一个动态标签集,从一个空白开始的数组生成标签。 When I add a new item to the array it appears as a new tab. 当我向数组添加新项目时,它将显示为新选项卡。 I want the last added tab to be the active one. 我希望最后添加的标签是活动标签。 I set the active index every time I add an item to the array 每次我向数组添加项目时都会设置活动索引
HTML: HTML:
<uib-tabset active="activeTabIndex">
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}">Some content</uib-tab>
</uib-tabset>
JavaScript: JavaScript的:
$scope.activeTabIndex = 0
$scope.tabs = [];
$scope.addTab = function() {
var newTab = { title: 'Tab ' + ($scope.tabs.length + 1) };
$scope.tabs.push(newTab);
$scope.activeTabIndex = ($scope.tabs.length - 1);
console.log($scope.activeTabIndex);
};
Here's the Plunk for the full source code of the demo: https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview 这是演示的完整源代码的Plunk: https ://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p = preview
The problem is it seems to be working with odd number of tabs only. 问题是它似乎仅使用奇数个选项卡。 Here's what I mean: 这就是我的意思:
On initial load it looks like this: 在初始加载时,它看起来像这样:
After I add a new tab it shows the active one correctly: 添加新选项卡后,它会正确显示活动选项卡:
When I add another one nothing becomes selected and activeTabIndex variable becomes undefined: 当我添加另一个时,没有任何内容被选中,并且activeTabIndex变量变为未定义:
And on the 3rd one it starts working again: 在第3天它再次开始工作:
So for even active index numbers (0, 2) it works fine. 因此,对于偶数活动索引号(0,2),它工作正常。 But somehow instead of Acitve Index: 1 it shows blank and doesn't set the active tab. 但不知怎的,而不是Acitve Index:1它显示为空白,并没有设置活动标签。 I write the variable to console and it displays all the values correctly. 我将变量写入控制台,它正确显示所有值。
Any help/pointers/ideas are welcome. 欢迎任何帮助/指针/想法。
Thanks. 谢谢。
active (Default: Index of first tab) - Active index of tab. active (默认:第一个选项卡的索引) - 选项卡的活动索引。 Setting this to an existing tab index will make that tab active. 将此设置为现有选项卡索引将使该选项卡处于活动状态。
Ensure the tabs array contains the active one, I think you should add a $timeout there: 确保tabs数组包含活动数组,我认为你应该在那里添加$ timeout:
$scope.addTab = function() {
var newTab = { title: 'Tab ' + ($scope.tabs.length + 1) };
$scope.tabs.push(newTab);
$timeout(function(){
$scope.activeTabIndex = ($scope.tabs.length - 1);
});
console.log($scope.activeTabIndex);
};
https://plnkr.co/edit/q4QP7zoB0HXSjn3MplE4?p=preview https://plnkr.co/edit/q4QP7zoB0HXSjn3MplE4?p=preview
I had the similar problem, But a little more Complex. 我有类似的问题,但更复杂一点。 I loaded my dynamic tabs from API, and I had one static tab and the rest were dynamic. 我从API加载了动态标签,我有一个静态标签,其余的都是动态标签。
<uib-tabset active="activeTabIndex" ng-if="showTabs">
<uib-tab heading="Static Heading">Static content</uib-tab>
<uib-tab data-ng-repeat="tab in tabs" heading="{{tab.title}}">Some content</uib-tab>
</uib-tabset>
I used two variables with default values: 我使用了两个默认值的变量:
$scope.showTabs = false;
$scope.activeTabIndex = 0;
First, I loaded my dynamic tabs from API, Then in the success callback, I specified the value of activeTabIndex
from tabs array. 首先,我从API加载了动态标签,然后在成功回调中,我从tabs数组中指定了activeTabIndex
的值。 Then I changed the value of showTabs
to true. 然后我将showTabs
的值showTabs
为true。
I shared it, just hope it can help more people with this case. 我分享了它,希望它可以帮助更多人处理这个案例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.