我有一个动态选项卡集,它从一个以空白开始的数组生成选项卡。当我向数组添加新项目时,它会显示为新选项卡。我希望最后添加的选项卡成为活动选项卡。每次向数组添加项目时我都会设置活动索引
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);
};
这是演示的完整源代码的 Plunk:https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview
问题是它似乎只适用于奇数个选项卡。这就是我的意思:
初始加载时,它看起来像这样:
添加新选项卡后,它会正确显示活动选项卡:
当我添加另一个时,没有任何内容被选中,并且 activeTabIndex 变量变得未定义:
从第三个开始,它又开始工作了:
因此,即使对于活动索引号 (0, 2),它也能正常工作。但不知何故,它不是 Acitve Index: 1,而是显示空白,并且不设置活动选项卡。我将变量写入控制台,它正确显示所有值。
欢迎任何帮助/指示/想法。
Thanks.
根据docs https://github.com/angular-ui/bootstrap/tree/master/src/tabs/docs:
active(默认值:第一个选项卡的索引)- 选项卡的活动索引。将其设置为现有选项卡索引将使该选项卡处于活动状态。
确保选项卡数组包含活动选项卡,我认为您应该在其中添加 $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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)