如何跳过禁用选项卡的焦点

Question

我有一个包含多个选项卡的 html 页面，可以根据 Angular 中的某些条件禁用其中一个或多个选项卡。（至少其中之一将始终启用）

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

当用户进入页面时，第一个选项卡会获得焦点，无论它是否被禁用。
我希望它最初 focus/show 第一个未禁用的选项卡 。我将如何实现这样的目标？

编辑：plnkr：http://plnkr.co/edit/NWQDPk3DgBUpLqA0vRPw?p=preview

Answer 1

需要创建将执行以下 activity、

的自定义指令

识别禁用的 TAB，如果它的第一个选项卡然后删除它的 'active' css
从选项卡列表中迭代第二个活动选项卡，检查它是否被禁用。
如果第二个也被禁用，则移至下一个...依此类推...
如果发现第二个选项卡处于活动状态，则添加 'active' css 并触发相应锚标记的点击。它将在 UI.

你的 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

如何跳过禁用选项卡的焦点

How to skip focus of disabled tabs

html

focus

setfocus

disabled-control

angularjs