如何在单击特定选项卡后禁用其他选项卡？

Question

我试图在点击特定标签时禁用所有其他标签。意思是，假设，最初当应用程序运行时，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); 
      }); 
     }); 

Answer 1

请找到下面的代码片段，另外加入onSelectTab（）。让我知道你是否需要改变。
DEMO

HTMLFILE

<div ng-controller="mainController"> 
    <tabset> 
     <tab 
      ng-repeat="t in tabs" 
      heading="{{t.heading}}" 
      select="go(t.route, true)" 
      ng-click="onSelectTab(t)" 
      active="t.active" 
      disabled="flags.disableTab && !t.active"> 
     </tab> 
    </tabset> 
    <button class="btn" ng-click="flags.disableTab = false">CANCEL</button> 
    <div ui-view></div> 
</div> 

controllerFile.js

app.controller("mainController", function($rootScope, $scope, $state, $timeout, $filter) { 

    $scope.flags = {}; 
    $scope.go = function(route) { 
    $state.go(route); 
    }; 

//Additionally added below method 
$scope.onSelectTab = function(t) { 
    if (t.heading == 'tab2') { 
     $scope.flags.disableTab = true; 
     } 
}; 
//End 

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

注：接受的答案，如果它的工作原理