UI-Bootstrap - eine Registerkarte hinzufügen und wähle ihn mit Standard

Question

Ich versuche, ein Tab-System mit ui-Bootstrap zu machen.

Es ist fast in Ordnung, aber ich habe immer noch Probleme mit dem letzten Reiter, wenn ich hinzufügen. Hinzufügen einer Registerkarte ist OK, aber wenn ich es automatisch auswählen möchte, habe ich ein seltsames Verhalten: Eine Registerkarte hinzugefügt: fein Eine Registerkarte hinzugefügt: nicht ausgewählt Eine Registerkarte hinzugefügt: fein Eine Registerkarte hinzugefügt : und so weiter ... nicht

ich einen plunkr ausgewählt, um meinen Fehler zu zeigen, klicken Sie einfach mehrmals auf die Schaltfläche „+“ und haben einen Blick, auf die Registerkarte ausgewählt haben, gemacht.

Hier ist der JS-Code:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) { 

    $scope.tabs = [{ 
    title: 'Dynamic Title 1', 
    content: 'Dynamic content 1', 
    active: false 
    }, { 
    title: 'Dynamic Title 2', 
    content: 'Dynamic content 2', 
    active: false 
    }]; 

    $scope.addTab = function() { 
    $scope.tabs.push({ 
     title: 'Dynamic Title ' + ($scope.tabs.length + 1), 
     content: 'Dynamic content ' + ($scope.tabs.length + 1) 
    }); 

    $scope.active = $scope.tabs.length - 1; 
    }; 

}); 

Hier ist der HTML-Code:

<div ng-controller="TabsDemoCtrl"> 
    <p>Select a tab by setting active binding to true:</p> 
    <p> 
     <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select second tab</button> 
     <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select third tab</button> 
    </p> 
    <p> 
     <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable/Disable third tab</button> 
    </p> 
    <hr /> 

    <uib-tabset active="active"> 
     <uib-tab index="$index" ng-repeat="tab in tabs" heading="{{tab.title}}"> 
     {{tab.content}} 
     </uib-tab> 
    </uib-tabset> 

    <br /><br /> 

    <button ng-click="addTab()">plus</button> 

    </div> 

Jede Hilfe zu dieser wäre schön,

Prost

Answer 1

Sie haben eine verwenden, Timeout, uibootstrap unterstützt technisch nicht dynamisch generierte Tabs.

$timeout(function() { 
    $scope.active = $scope.tabs.length - 1; 
}, 0); 

Siehe diesen Thread. https://github.com/angular-ui/bootstrap/issues/5656