使用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

根据docs：

有效（默认：第一个标签的索引） - 标签的有效索引。将其设置为现有选项卡索引将使该选项卡处于活动状态。

确保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

Answer 2

我有类似的问题，但有点复杂。我从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>

我使用了两个默认值的变量：

$scope.showTabs = false;
$scope.activeTabIndex = 0;

首先，我从API加载了动态标签，然后在成功回调中，我从tabs数组中指定了activeTabIndex的值。然后我将showTabs的值更改为true。

我分享了它，希望它可以帮助更多人处理这种情况。