Question

我希望将一个类应用于一个禁用它的选项卡。

对于我正在使用的CSS

.not-active {
    pointer-events: none;
    cursor: default;
}

在看到标签页之前，会向用户显示几个复选框。如果未选中复选框，则此选项卡将应用.not-active类。

我的标签

 <nav id='tabs'>
        <ul>
            <li 
                ng-repeat='tab in tabs'
                ng-class='{"tab-current":isActiveTab(tab.url)}'
                ng-click='onClickTab(tab)'>
                <a></a>
            </li>
        </ul>
    </

 nav>

当isActiveTab返回true时，我应用tab-current类。

但是我不太确定基于未选中的复选框添加.not-active类的最佳方法是什么。

非常感谢任何指导。

Answer 1

我建议您使用复选框更改tip属性（例如tip.isDisabled）。然后在onClickTab回调中禁用标签会很容易，你可以这样做：

$scope.onClickTab = function(tab){
    if (tab.isDisabled) return;
    // do something here
}

如何更改tip.isDisabled属性？只需为您的复选框使用适当的ng-model：

    <ul>
        <li ng-repeat='tab in tabs'>
            <input type=checkbox ng-model='tip.isDisabled'>
        </li>
    </ul>

Answer 2

您可以将复选框模型用作ng-class中的表达式，以有条件地应用not-active类。像

   <nav id='tabs'>
        <ul>
            <li
                ng-repeat='tab in tabs'
                ng-class='{"tab-current":isActiveTab(tab.url),'not-active':!checkboxmodel}'
                ng-click='onClickTab(tab)'>
                <a></a>
            </li>
        </ul>
    </nav>

checkboxmodel是您的复选框的ng-model。

角度禁用选项卡

2 个答案: