[英]Dynamically set tab in AngularUI Bootstrap (ui.bootstrap.tabs)
I am using the tabs directive of AngularUI Bootstrap with dynamically generated tabs. 我正在将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>
When the tabs array is changed the UI Tabs get amended accordingly but no active tab is set (although I explicitly do set in in the controller) 当tabs数组更改时,UI Tabs会进行相应的修改,但未设置任何活动的tab(尽管我明确地在控制器中进行了设置)
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'
};
});
Can anybody tell me what I am missing? 谁能告诉我我想念的东西吗?
See here for Plunker: https://plnkr.co/edit/Ow7Cd1eidCgaLNOhX1Vl 请参阅此处以了解Plunker: https ://plnkr.co/edit/Ow7Cd1eidCgaLNOhX1Vl
Thanks in advance Paul 提前谢谢保罗
You need to wrap the setting of activeForm in a $timeout: 您需要将activeForm的设置包装在$ timeout中:
$timeout(function(){
$scope.activeForm = 0;
});
This is a known issue - https://github.com/angular-ui/bootstrap/issues/5805 这是一个已知问题-https://github.com/angular-ui/bootstrap/issues/5805
Hey here is code need to change 嘿,这里的代码需要更改
$timeout(function(){
$scope.activeForm = 0; //Not working, how can I select tab dynamically?
},0);
This will trigger digest cycle and your code will work 这将触发摘要周期,您的代码将正常工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.