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

Volkan Paksoy 发表于 Dev

沃尔坎·帕克索伊（Volkan Paksoy）

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

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

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

谢谢。

huan feng

根据文档：

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=预览

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。