Question

我在plnkr上创建了一个演示。我想禁用一个特定的标签说迁移，我尝试写禁用：true但它似乎没有用。

http://plnkr.co/edit/0XgquovKIICmgGcSVSef?p=preview HTML代码：

<!doctype html>

<div ng-app="TabsApp">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="punk.css" rel="stylesheet">
  </head>
  <body>

<div id="tabs" ng-controller="TabsCtrl">
        <ul>
            <li ng-repeat="tab in tabs" 
                ng-class="{active:isActiveTab(tab.url)}" 
                ng-click="onClickTab(tab)">{{tab.title}}</li>
        </ul>
        <div id="mainView">
            <div ng-include="currentTab"></div>
        </div>
    </div>
  </body>
</html>

控制器代码：

angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
    $scope.tabs = [{
            title: 'One',
            url: 'coredcplan.html',

        }, {
            title: 'Two',
            url: 'migration.html',
           disabled: true,
        }, {
            title: 'Three',
            url: 'schedule.html',


    }];

    $scope.currentTab = 'coredcplan.html';

    $scope.onClickTab = function (tab) {
        $scope.currentTab = tab.url;
    }

    $scope.isActiveTab = function(tabUrl) {
        return tabUrl == $scope.currentTab;
    }
}]);

Answer 1

您可以做的是提供一个属性disabled，然后在选项卡上点击：

$scope.tabs = [{
        title: 'One',
        url: 'coredcplan.html'
    }, {
        title: 'Two',
        url: 'migration.html',
        disabled: true
    }, {
        title: 'Three',
        url: 'schedule.html'
}];

$scope.onClickTab = function (tab) {
    if(tab.disabled)
        return;

    $scope.currentTab = tab.url;
}

请参阅this plunker

禁用angularjs中的Tab

1 个答案: