使用Angular UI Bootstrap在动态创建的选项卡上设置活动选项卡 [英] Setting active tab on dynamically created tabs with Angular UI Bootstrap

问题描述

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

I have a dynamic tabset that generates the tabs from an array which starts out blank. When I add a new item to the array it appears as a new tab. I want the last added tab to be the active one. I set the active index every time I add an item to the array

HTML:

<uib-tabset active="activeTabIndex">
    <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}">Some content</uib-tab>
</uib-tabset>

JavaScript:

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

以下是该示例的完整源代码的代码: https://plnkr.co/编辑/TX6ek4R62AfM2zUXcoC3?p =预览

Here's the Plunk for the full source code of the demo: https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview

问题在于它似乎仅在使用奇数个标签时才起作用.这就是我的意思:

The problem is it seems to be working with odd number of tabs only. Here's what I mean:

在初始加载时，它看起来像这样:

On initial load it looks like this:

添加新标签后，它会正确显示活动标签:

After I add a new tab it shows the active one correctly:

当我添加另一个时，什么也没有选择，并且activeTabIndex变量变为未定义:

When I add another one nothing becomes selected and activeTabIndex variable becomes undefined:

第三个开始，它又开始工作了:

And on the 3rd one it starts working again:

因此，即使是活动索引号(0、2)，它也可以正常工作.但是以某种方式代替Acitve Index:1显示为空白，并且未设置活动选项卡.我将变量写入控制台，它会正确显示所有值.

So for even active index numbers (0, 2) it works fine. But somehow instead of Acitve Index: 1 it shows blank and doesn't set the active tab. I write the variable to console and it displays all the values correctly.

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

Any help/pointers/ideas are welcome.

谢谢.

推荐答案

根据 docs :

活动(默认值:第一个标签的索引)-标签的活动索引.将其设置为现有的标签索引将使该标签处于活动状态.

active (Default: Index of first tab) - Active index of tab. Setting this to an existing tab index will make that tab active.

确保tabs数组包含活动数组，我认为您应该在其中添加$ timeout:

Ensure the tabs array contains the active one, I think you should add a $timeout there:

      $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

这篇关于使用Angular UI Bootstrap在动态创建的选项卡上设置活动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！