如何跳過禁用選項卡焦點

我有一個基於Angular中的某些條件可以禁用哪個或哪些多個選項卡的HTML頁面。（其中至少有一個將始終啓用）如何跳過禁用選項卡焦點

<tabset> 
    <tab ng-disabled="vm.disableTab(1)"> 
    <tab ng-disabled="vm.disableTab(2)"> 
    <tab ng-disabled="vm.disableTab(3)"> 
</tabset>

當用戶進入頁面，第一個選項卡獲得焦點不管它是不是被禁用。
我希望它最初集中/顯示第一個選項卡，未禁用。我將如何實現這樣的事情？

編輯：plnkr：http://plnkr.co/edit/NWQDPk3DgBUpLqA0vRPw?p=preview

來源

2016-12-14 neXus

代碼標籤集和標籤迪爲了理解這個問題的背景，或者如果它是一個已知的庫（如angular-ui），需要使用rectives來包含它的版本。一個plnkr是最好的。 – bhantol

需要創建自定義指令將執行下列活動，

確定禁用TAB如果它的第一個標籤，然後除去其 '有效' 的CSS
迭代第二活性從選項卡列表中檢查選項卡是否禁用。
如果第二個也被禁用，然後移動到下一個...依此類推。
如果第二個選項卡被激活，則添加'active'css並觸發相應錨標籤的點擊。這將在用戶界面上顯示其各自的div內容。

你JS指令，

.directive('activeTabs', function($compile) 

{ 

return { 
    link: function(scope, el, attrs) { 
     var tabs = el.find('li'); 
     setTimeout(function(){ 
      var activeTab = false; 
      for (var i = 0; i < tabs.length; i++) 
      { 
       if (activeTab) 
        break; 
       tab = tabs[i]; 
       if (!angular.element(tab).hasClass("disabled")) 
       { 
        angular.element(tab).addClass('active'); 
        tab.active = true; 
        activeTab = true; 
        var a = angular.element(tab).find('a')[0]; 
        a.click(); 
        break; 
       } 
       else 
       { 
        tab.active = false; 
        angular.element(tab).removeClass('active'); 
       } 
      } 
     },10); 
    } 
} 
});

你HTML與新指令，

<div ng-controller="test"> 
    <tabset active-tabs> <!--New directive is here--> 
     <tab heading="One" disabled="isDisabled(1)">This should not be shown</tab> 
     <tab heading="Two" disabled="isDisabled(2)">This should receive initial focus</tab> 
     <tab heading="Three" disabled="isDisabled(3)">Three</tab> 
    </tabset> 
    </div>

更新Plunker

來源

2016-12-14 21:21:15 user3249448

我希望有一些現有的功能，但這也適用。我認爲你不應該關心_active_類，因爲點擊這個標籤會自動改變它。我簡化了你的[Plunker]（http://plnkr.co/edit/kLpP9M0FwIdgLJsKBkuT?p=preview），它仍然有效 – neXus

如何跳過禁用選項卡焦點

回答

相關問題