在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中禁用選項卡

回答

相關問題