UI-bootstrap - タブを追加してデフォルトで選択します

Question

私はui-bootstrapを使用してタブシステムを作成しようとしています。

これはほぼ問題なく、追加すると最後のタブに問題があります。 1つのタブが追加されました：選択されていません 1つのタブが追加されました： 1つのタブが追加されました：ように を選択していない...

私はただ、「+」ボタンを複数回クリックして、タブが選択されている顔をして、私のバグを実証するplunkrを作りました。ここで

は、JSのコードは次のとおりです。

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; 
    }; 

}); 

ここではHTMLのコードは次のとおりです。

<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> 

この上の任意のヘルプがいいだろう、あなたが使用する必要が

乾杯

Answer 1

は、 timeout、uibootstrapは、動的に生成されたタブを技術的にサポートしていません。

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

このスレッドを参照してください。 https://github.com/angular-ui/bootstrap/issues/5656