選項卡的內容重疊，其鄰居的選項卡的內容

讓我用下面的例子來說明這個問題：選項卡的內容重疊，其鄰居的選項卡的內容

我加例如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和角度ui.bootstrap。所以，請把我當成初學者。

來源

2016-08-22 Adeel Bukhari