在angularjs中禁用选项卡

我在plnkr创建了一个演示。我想禁用特定的标签说迁移，我尝试通过写入禁用：true，但它似乎并没有工作。在angularjs中禁用选项卡

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

来源

2015-06-15 pankaj

'disable'是在''指令一个指令，所以你必须创建自己的 – devqon

你所能做的就是给一个属性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

来源

2015-06-15 13:17:32 devqon

雅感谢在执行您不使用这些指令，就像一个魅力@devqon – pankaj

与UI实现这一目标的任何方式引导标签 – Sana

在angularjs中禁用选项卡

回答

相关问题