选项卡的内容与其相邻选项卡的内容重叠

Question

让我借助以下示例来解释这个问题：

I added 3 tabs e.g. TAB1 , TAB2 and TAB3. Now If I delete TAB2, the remaining tabs will be TAB1 and TAB2 (as TAB3 will take TAB2 place now). Now, when I add a new tab e.g. TAB3, I will see 2 tab's contents at the same time. One which tab was newly created and second which tab was right behind the newly created tab.

我通过检查在添加和删除选项卡时监视了 HTML，还检查了数组的索引值，它们变化良好。

据我所知，原因是新添加的选项卡的内容选项卡实际上是静态的 "active" class，不会改变。我想 ui.bootstrap 是导致此问题的原因。

我正在使用以下代码制作我需要的选项卡功能。 HTML代码为：

<uib-tabset active="activeForm">
    <uib-tab index="$index + 1" ng-repeat="tab in $scope.tabs" heading="{{tab.title}} {{$index+1}} " active="{{tab.active}}">
        {{tab.content}}
        <button type="button" class="btn pull-left btn-primary" ng-click="removeTab($index);">
            Delete this wave
        </button>
    </uib-tab>
    <button type="button" class="btn" ng-click="addNewTab();">
        +
    </button>
</uib-tabset>

而js代码为：

$scope.tabs = [
    { title:'TAB'+($scope.tabs.length+1), content:'This wave of contacts will be activated before all other waves of contacts.', active:true }
];
$scope.addNewTab = function() {
    $scope.tabs.push(
    {
        title:'TAB'+($scope.tabs.length+1), content:'Content for tab new tab.'
    });
    $scope.removeTab = function(index) {
        if($scope.tabs.length>1) {
            $scope.tabs.splice(index, 1);
        }
    };
}

还有一点，我对 AngularJS 和 angular ui.bootstrap 都是全新的。所以，请把我当成初学者

Answer 1

如果您在逻辑中使用 $index (html)，则必须在 ng-repeat 中使用 "track by $index"

例如 ng-repeat="tab in $scope.tabs track by $index"

选项卡的内容与其相邻选项卡的内容重叠

Tab's content overlaps its neighbour's tab's content

tabs

angularjs

angular-ui-bootstrap