在 AngularUI 中动态设置选项卡 Bootstrap (ui.bootstrap.tabs)

Question

我正在使用 AngularUIBootstrap 的选项卡指令和动态生成的选项卡。

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

当更改“选项卡数组”时，UI选项卡相应地进行修改，但没有设置主动选项卡（尽管我明确设置了在控制器中设置）

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

$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);

这将触发摘要循环，您的代码将起作用

在 AngularUI 中动态设置选项卡 Bootstrap (ui.bootstrap.tabs)

Dynamically set tab in AngularUI Bootstrap (ui.bootstrap.tabs)

javascript

angularjs

angular-ui-bootstrap