在AngularUI Bootstrap（ui.bootstrap.tabs）中動態設置選項卡

Question

我使用帶有動態生成選項卡的AngularUI Bootstrap選項卡指令。

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

當標籤數組改變了用戶界面選項卡獲得相應的修改，但沒有激活的標籤設置（雖然我明確地不設置在控制器）

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) { 
    $scope.tabs = [ 
    { title:'Dynamic Title 1', content:'Dynamic content 1' }, 
    { title:'Dynamic Title 2', content:'Dynamic content 2' }, 
    { title:'Dynamic Title 3', content:'Dynamic content 3' }, 
    { title:'Dynamic Title 4', content:'Dynamic content 4' } 
    ]; 

    $scope.changeTabs = function(){ 
     $scope.tabs = [ 
     { title:'Dynamic Title 5', content:'Dynamic content 5' }, 
     { title:'Dynamic Title 6', content:'Dynamic content 6' } 
    ]; 
    $scope.activeForm = 0; //Not working, how can I select tab dynamically? 
    }; 

    $scope.model = { 
    name: 'Tabs' 
    }; 
}); 

誰能告訴我失去了什麼？

在這裏看到Plunker：提前https://plnkr.co/edit/Ow7Cd1eidCgaLNOhX1Vl

感謝 保羅

Answer 1

你需要用的ActiveForm的設置在$超時：

$timeout(function(){ 
    $scope.activeForm = 0; 
}); 

這是一個已知的問題 - https://github.com/angular-ui/bootstrap/issues/5805

更新plunkr

Answer 2

嘿這裏是代碼需要改變

$timeout(function(){ 
$scope.activeForm = 0; //Not working, how can I select tab dynamically? 
},0); 

這將觸發消化週期，你的代碼將工作