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

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

请在下面找到代码 sn-p，另外添加了 onSelectTab()。如果您需要任何更改，请告诉我。
DEMO

HTML文件

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

注意：如果有效，请接受答案