Question

我在点击特定标签时尝试禁用所有其他标签。意味着，最初在应用程序运行时，tab1显示为默认值。之后，如果我选择tab2，那么当我们点击“取消”按钮时，所有其他选项卡都将被禁用并且只能启用。

HTML code：

 <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

myClass::myClass(const std::string P) : 
            dataPath(P) {
    // read data-sets into class member variables
}

controllerFile.js

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

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

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

1 个答案: