我正在使用AngularUI Bootstrap的tabs指令和动态生成的标签。
<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
提前致谢 保罗
答案 0 :(得分:3)
您需要将activeForm的设置包装在$ timeout中:
$timeout(function(){
$scope.activeForm = 0;
});
这是一个已知问题 - https://github.com/angular-ui/bootstrap/issues/5805
更新了plunkr
答案 1 :(得分:1)
嘿,这里是代码需要改变
$timeout(function(){
$scope.activeForm = 0; //Not working, how can I select tab dynamically?
},0);
这将触发摘要周期,您的代码将正常工作