Question

让我在以下示例的帮助下解释这个问题：

我添加了3个标签，例如TAB1，TAB2和TAB3。现在，如果我删除TAB2，那么剩余的标签将是TAB1和TAB2（因为TAB3将采用TAB2位置现在）。现在，当我添加新标签时，例如TAB3，我会看到2个标签的内容同时。一个选项卡是新创建的，第二个选项卡就在新创建的标签后面。

我通过检查添加和删除选项卡时监视HTML，并检查数组的索引值是否正常变化。

据我所知，原因是新添加的标签的内容标签实际上是静态的“活动”类，不会发生变化。我猜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

你必须使用＆＃34;跟踪$ index＆＃34;在ng-repeat中，如果你在逻辑中使用$ index（html）

例如ng-repeat =＆＃34; $ scope.tabs中的标签跟踪$ index＆＃34;

Tab的内容与其邻居的标签内容重叠

1 个答案: