[英]How to make a tab active from the beginning in Angular Bootstrap UI?
I'm trying to make one of the tabs active (tabs are already in the template), depending on some url params. 我正在尝试使其中一个选项卡处于活动状态(选项卡已在模板中),具体取决于某些url参数。 Unfortunately, it always make active by default the first one found in the html template , even if I use a ng-repeat as in this example. 不幸的是,即使在本示例中使用ng-repeat,它也始终默认使html模板中找到的第一个激活。
This doesn't work: 这不起作用:
$scope.tabs = {
title2: {active:false, content:"Hello world 2!"},
title3: {active:false, content:"Hello world 3!"},
title4: {active:false, content:"Hello world 4!"}
}
$scope.tabs.title4.active = true;
Here is a fiddle: http://jsfiddle.net/alexrada/KFAXH/5/ 这是一个小提琴: http : //jsfiddle.net/alexrada/KFAXH/5/
you need to use the $routeParams service inside your controller and set the the $scope active value from it. 您需要在控制器内部使用$ routeParams服务,并从中设置$ scope有效值。 something along these lines: 遵循以下原则:
.controller('MyTabCtrl', function($scope, $routeParams) {
$scope.tabs[$routeParams.active].active = true;
})
where the URL would be /?active=title4
该网址为/?active=title4
you will also need to set up your $routeProvider service. 您还需要设置$ routeProvider服务。 I'll see if I can get a fork of your JSFiddle to work once it becomes usable again (it's soooo slow currently...) 我将看看它是否可以再次使用您的JSFiddle分支(当前速度太慢了...)
Issue Fixed, you need to use basic concept of ui.bootstrap First Tab will be active by default 已修复问题,您需要使用ui.bootstrap的基本概念。默认情况下,第一个选项卡将处于活动状态
Html Code : HTML代码:
<div ng-controller="MyTabCtrl">
<tabset>
<tab heading="title1">{{tabs.title1.content}}</tab>
<tab heading="title2">{{tabs.title2.content}}</tab>
<tab heading="title3">{{tabs.title3.content}}</tab>
</tabset>
</div>
script code 脚本代码
angular.module("myApp", ['ui.bootstrap']).
controller("MyTabCtrl", function($scope) {
$scope.panes = [
{title:"First", content:"Hello world!"},
{title:"Second", content:"Bonjour monde!"},
{title:"Second", content:"Bonjour monde!"}
];
$scope.tabs = {
title1: {content:"Hello world 1!"},
title2: {content:"Hello world 2!"},
title3: {content:"Hello world 3!"}
}
// $scope.tabs.active = true;
});
Working Example : http://jsfiddle.net/KFAXH/28/ 工作示例: http : //jsfiddle.net/KFAXH/28/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.