AngularJS - Aktives Tabset setzen nach dem Löschen irgendwas

Question

Ich habe einen Code, der eine Schaltfläche mit einem ng-klick enthält, die, wenn gedrückt wird, eine neue Registerkarte zum Tabs-Array hinzufügt.

<div class="btn btn-primary" ng-click="add()">Add</div> 

$scope.add = function() 
    { 
    $scope.tabs.push({heading: 'new', content: 'ddddddd'}); 

    $timeout(function() 
    { 
     $scope.active = $scope.tabs.length; 
    }); 
    } 

Dann wird das Array gefüllt und showd in der Ansicht:

<uib-tabset active="active"> 
    <uib-tab ng-repeat="tab in tabs" index="$index + 1"> 
     <uib-tab-heading>{{ tab.heading }} - <a ng-click="remove($index)">remove</a></uib-tab-heading> 
     {{tab.content}} 
     </uib-tab> 
    </uib-tabset> 

Auch jeder Lasche eine Link Entfernen, die diese Funktion aufruft:

$scope.remove = function(index) 
    { 
    $scope.tabs.splice(index, 1); 
    $scope.active = $scope.tabs.length; 
    } 

Das Problem ist, dass Wenn ich eine Registerkarte lösche, die nicht die zuletzt hinzugefügte Registerkarte ist, sind die aktive Registerkarte und der Index nicht identisch. Es gibt eine Plunkr, um das Problem zu demonstrieren: http://plnkr.co/edit/02Lll7oPYyvAxcKu5GkK?p=preview Wie Sie sehen können, wenn eine Registerkarte (nicht die letzte) gelöscht wird, sind "Tabs" und "Index" Variablen nicht identisch.

Irgendwelche Ideen bitte?

Answer 1

Momentan unterstützt das eckige Bootstrap nicht die dynamische Generierung von Registerkarten. Aber wenn Sie möchten $timeout Lösung funktioniert. können Sie mehr von here

Sie für timeout eine Funktion definieren müssen lesen, die darauf achten, wird Reiter ausgewählt, dass bei jedem beliebigen vorhandenen neuen Tab oder entfernen gehen hinzuzufügen. Seine Take-ID des Tabs, der zuletzt in der Tabliste enthalten ist.

function callTimeOut(tabNoIndex) { 

     $timeout(function() { 
      $scope.active = tabNoIndex; 
     }, 0); 
     } 

Ihre Registerkarte Array wie diese mit tabNo als Verschluss Eigenschaft aussehen sollte. Dies wird keine Tabs verfolgen, die bisher erstellt wurden, da uitab die Tab-ID nicht neu anordnet, sobald sie entfernt oder hinzugefügt wird. Sie müssen sich um dieses kümmern.

$scope.tabs.push({ 
      heading: 'new', 
      content: 'ddddddd', 
      id: ++tabNo 
     }); 

Ihre Funktion zum Hinzufügen und Entfernen sollte wie folgt aussehen.

$scope.add = function() { 
     $scope.tabs.push({ 
      heading: 'new', 
      content: 'ddddddd', 
      id: ++tabNo 
     }); 

     callTimeOut($scope.tabs.length); 

     } 


     $scope.remove = function(index) { 
     $scope.tabs.splice(index, 1); 

     var tabIndex = $scope.tabs[$scope.tabs.length - 1].id; 
     callTimeOut(tabIndex); 
     } 

hier ist die Arbeits Plunker