使用 Angular UI Bootstrap 在动态创建的选项卡上设置活动选项卡 [英] Setting active tab on dynamically created tabs with Angular UI Bootstrap
问题描述
我有一个动态标签集,它从一个以空白开始的数组生成标签.当我向数组添加新项目时,它显示为一个新选项卡.我希望最后添加的标签成为活动标签.每次向数组中添加项目时,我都会设置活动索引
HTML:
<uib-tab ng-repeat="tab in tabs" Heading="{{tab.title}}">一些内容</uib-tab></uib-tabset>
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);控制台日志($scope.activeTabIndex);};
这是演示完整源代码的 Plunk:
添加新标签后,它会正确显示活动标签:
当我再添加一个时,什么都没有被选中并且 activeTabIndex 变量变得未定义:
第 3 次它又开始工作了:
因此,即使对于活动索引号 (0, 2),它也能正常工作.但不知何故而不是 Acitve Index: 1 它显示为空白并且没有设置活动选项卡.我将变量写入控制台,它会正确显示所有值.
欢迎任何帮助/指针/想法.
谢谢.
根据 docs:
active(默认值:第一个标签的索引)- 标签的活动索引.将此选项设置为现有标签索引将使该标签处于活动状态.
确保 tabs 数组包含活动的数组,我认为你应该在那里添加一个 $timeout :
$scope.addTab = function() {var newTab = { title: 'Tab ' + ($scope.tabs.length + 1) };$scope.tabs.push(newTab);$超时(功能(){$scope.activeTabIndex = ($scope.tabs.length - 1);});控制台日志($scope.activeTabIndex);};
https://plnkr.co/edit/q4QP7zoB0HXSjn3MplE4?p=preview
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:
<uib-tabset active="activeTabIndex">
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}">Some content</uib-tab>
</uib-tabset>
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
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:
And on the 3rd one it starts working again:
So for even active index numbers (0, 2) it works fine. But somehow instead of Acitve Index: 1 it shows blank and doesn't set the active tab. I write the variable to console and it displays all the values correctly.
Any help/pointers/ideas are welcome.
Thanks.
According to docs:
active (Default: Index of first tab) - Active index of tab. 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:
$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
这篇关于使用 Angular UI Bootstrap 在动态创建的选项卡上设置活动选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!