如何在Angular Bootstrap UI中開始激活標籤頁？

我想使其中的一個選項卡處於活動狀態（選項卡已經在模板中），具體取決於一些url參數。不幸的是，即使我在本例中使用了ng-repeat，它仍然會在默認中成爲第一個在html模板中找到的活動。如何在Angular Bootstrap UI中開始激活標籤頁？

這不起作用：

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

這裏是一個小提琴：http://jsfiddle.net/alexrada/KFAXH/5/

來源

2013-07-17 Alexandru Rada

[在角引導中設置初始靜態選項卡]的可能的重複（http://stackoverflow.com/questions/17695629/setting-the-initial-static-tab-in-angular-bootstrap）。一個錯誤已經提交：https：//github.com/angular-ui/bootstrap/issues/678 –

重複是現貨。請參閱@ Thomas的答案。另外[問題＃747]（https://github.com/angular-ui/bootstrap/issues/747）和[拉＃834]（https://github.com/angular-ui/bootstrap/pull/834）是什麼似乎是最終的修復（至少對我來說）。 – Amir

您需要使用$ routeParams服務您的控制器內，並從它設定的範圍$活動值。東西沿着這些線路：

.controller('MyTabCtrl', function($scope, $routeParams) { 
    $scope.tabs[$routeParams.active].active = true; 
})

其中URL是/?active=title4

，你還需要設置你的$ routeProvider服務。我會看看，如果我可以得到一個你的JSFiddle的叉子，一旦它變得可用再次工作（它目前太慢...）

來源

2013-10-25 06:14:35 masteraka

問題修復，你需要使用ui.bootstrap的基本概念第一個選項卡將是活動的默認

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>

腳本代碼

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

工作實施例：http://jsfiddle.net/KFAXH/28/

來源

2017-04-10 07:32:00 santoshK

如何在Angular Bootstrap UI中開始激活標籤頁？

回答

相關問題