Как пропустить фокус отключенных вкладок

Question

У меня есть html-страница с несколькими вкладками, одна или несколько которых могут быть отключены в зависимости от некоторых условий в Angular. (По крайней мере один из них всегда будет включен)

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

Когда пользователь заходит на страницу, закладка первой получает фокус, независимо от того, или нет, он отключен.
Я бы хотел, чтобы изначально фокус/показать первая вкладка, которая не отключена. Как я могу достичь такого?

EDIT: plnkr: http://plnkr.co/edit/NWQDPk3DgBUpLqA0vRPw?p=preview

Answer 1

нужно создать пользовательскую директиву, которая будет осуществлять следующую деятельность,

• Определение инвалидов TAB, если его первая закладка затем удалить его 'активный' CSS
• итерацию второй активный вкладка из списка вкладок проверьте, отключено ли оно или нет.
• Если второй также отключен, то перейдите к следующему ... и т. Д.
• Если вторая вкладка найдена активной, добавьте «активный» 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> 

Update Plunker