使用 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 它显示空白并且不设置活动选项卡。我将变量写入控制台并正确显示所有值。

欢迎任何help/pointers/ideas。

谢谢。

Answer 1

根据docs：

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

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 加载了我的动态标签，然后在成功回调中，我从标签数组中指定了 activeTabIndex 的值。然后我把showTabs的值改成了true.

分享出来了，希望能帮到更多的人。

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

Setting active tab on dynamically created tabs with Angular UI Bootstrap

angularjs

angular-ui-bootstrap