我有一个动态选项卡集,它从一个数组开始生成一个选项卡,该数组开始为空白。当我将新项目添加到数组时,它将显示为新选项卡。我希望最后添加的选项卡是活动的。每次将项目添加到数组时,我都会设置活动索引
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
问题是它似乎只能使用奇数个选项卡。这就是我的意思:
初始加载时看起来像这样:
添加新标签后,它会正确显示活动标签:
当我添加另一个时,什么也没有选择,并且activeTabIndex变量变为未定义:
在第三个,它又开始工作了:
因此,即使是活动索引号(0、2)也可以正常工作。但是以某种方式代替Acitve Index:1显示为空白,并且未设置活动选项卡。我将变量写入控制台,它可以正确显示所有值。
欢迎任何帮助/指针/想法。
谢谢。
根据文档:
active(默认值:第一个标签的索引)-标签的有效索引。将其设置为现有的标签索引将使该标签处于活动状态。
确保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);
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句