содержимое вкладки перекрывает вкладки своего соседа Материалы

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 и угловой ui.bootstrap. Поэтому, пожалуйста, обращайтесь со мной как с новичком.

Answer 1

вы должны использовать «след от $ индекса» в нг-повторе, если вы используете $ индекс в вашей логике (HTML)

например, нг-повтор = "закладка в $ scope.tabs трека на $ индекса "