特定のタブをクリックした後に他のタブを無効にするにはどうすればよいですか？

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

注：それはあなたがフィドル/ plunkerを作成することができます