使用Angular UI Bootstrap在动态创建的选项卡上设置活动选项卡

Question

我有一个动态标签集,从一个空白开始的数组生成标签.当我向数组添加新项目时,它将显示为新选项卡.我希望最后添加的标签是活动标签.每次我向数组添加项目时都会设置活动索引

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变量变为未定义:

在第3天它再次开始工作:

因此,对于偶数活动索引号(0,2),它工作正常.但不知何故,而不是Acitve Index:1它显示为空白,并没有设置活动标签.我将变量写入控制台,它正确显示所有值.

欢迎任何帮助/指针/想法.

谢谢.

Answer 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);
      };

https://plnkr.co/edit/q4QP7zoB0HXSjn3MplE4?p=preview