在 AngularStrap 选项卡中未正确显示活动选项卡标题 [英] not show active tab title correctly in AngularStrap tab

问题描述

我有四个标签使用最新的 AngularStrap 标签，每个标签都有一个关闭按钮，每个标签窗格使用最新的 ui-grid.

1. 预期结果:关闭第二个选项卡，然后显示第三个活动tab，可以正确显示第三个选项卡标题和选项卡窗格.
2. 但实际结果是:关闭第二个选项卡，然后显示第三个选项卡窗格正确，第三个活动选项卡标题无法显示正确，它会显示第四个活动选项卡标题.

html 代码:

 
<div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-includesrc="tab.page" bs-pane></div>

js 代码:

//删除标签closeTab = 函数(对象){var index = obj.parentElement.dataset.index;//移除你选择的标签$rootScope.tabs.splice(index, 1);if(!angular.isUndefined($rootScope.tabs[index])){//显示下一个活动标签标题.$rootScope.tabs.activeTab = $rootScope.tabs[index].title;}}

谁能帮帮我?非常感谢！

解决方案

当你从数组中拼接时，索引会因为元素被移除而改变，所以 $rootScope.tabs.activeTab = $rootScope.tabs[index].标题； 不再对齐；

I have four tabs using the latest AngularStrap tab, every tab has a close button, and every tab pane using the latest ui-grid.

1. expected result: close the second tab, then show the third active tab, which can show the third tab title and tab pane correctly.
2. but the actual result is: close the second tab, then show the third tab pane correctly, the third active tab title can't show correctly, it show the fourth active tab title.

html code:

        <div data-fade="1" bs-active-pane="tabs.activeTab" bs-tabs>
            <div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include src="tab.page" bs-pane></div> 
        </div>

js code:

    // delete tab
    closeTab = function(obj){
        var index = obj.parentElement.dataset.index;
        // remove your selected tab
        $rootScope.tabs.splice(index, 1);
        if(!angular.isUndefined($rootScope.tabs[index])){
            // show the next active tab title.
            $rootScope.tabs.activeTab = $rootScope.tabs[index].title;

        }

    }

can anyone help me? thank u very much!

解决方案

When you splice from the array the indices change because the element is removed so $rootScope.tabs.activeTab = $rootScope.tabs[index].title; doesn't align anymore;

这篇关于在 AngularStrap 选项卡中未正确显示活动选项卡标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！