我試圖在點擊特定標籤時禁用所有其他標籤。意思是,假設,最初當應用程序運行時,tab1顯示爲默認值。之後,如果我選擇tab2,則所有其他選項卡都應禁用,並且只有在單擊「取消」按鈕時纔會啓用。如何在單擊特定選項卡後禁用其他選項卡?
HTML代碼:
<tabset>
<tab
ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
<div ui-view></div>
JS代碼:
var app = angular.module("routedTabs", ["ui.router", "ui.bootstrap"]);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/main/tab1");
$stateProvider
.state("main", { abtract: true, url:"/main", templateUrl:"main.html" })
.state("main.tab1", { url: "/tab1", templateUrl: "tab1.html" })
.state("main.tab2", { url: "/tab2", templateUrl: "tab2.html" })
.state("main.tab3", { url: "/tab3", templateUrl: "tab3.html" })
.state("main.tab4", { url: "/tab4", templateUrl: "tab4.html" });
});
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.tabs = [
{ heading: "Tab1", route:"main.tab1", active:false },
{ heading: "Tab2", route:"main.tab2", active:false },
{ heading: "Tab3", route:"main.tab3", active:false },
{ heading: "Tab4", route:"main.tab4", active:false },
];
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
您可以創建一個小提琴/ plunker? – tanmay
[plunker](http://plnkr.co/edit/EIDvQusuT0zLixo6xxBy?p=preview)我已經創建了plunker –
,所以取消按鈕位於當前標籤內還是在所有標籤之外? – tanmay