Question

我们在其中一个页面上有标签。我们要做的是在最初加载页面时禁用选项卡，然后在单击按钮时启用它们。在我的视图中定义选项卡时，我尝试添加“禁用”类：

  <ul class="nav nav-tabs">
                                <li id="tbReady" role="presentation" class="disabled"><a data-toggle="tab" href="#ready" ng-click="tabClick('tbReady')">Ready to Submit</a></li>
                                <li id="tbAction" role="presentation" class="disabled"><a data-toggle="tab" href="#action" ng-click="tabClick('tbAction')">Action Required</a></li>
                            </ul>

当页面加载时，它们会显示为已禁用，但是当您单击选项卡时，它们会再次变为活动状态。我还尝试从定义中删除数据切换，然后在tabClick函数中尝试返回false，但它仍然无法正常工作

   $scope.tabClick = function (selTabName) {

            if ($('#'+selTabName).hasClass('disabled')) {
                    return false;
                }


            if (selTabName == 'tbReady') {
                listReadyRows($rootScope.caseFileId);
            } else {
                listActionRows($rootScope.caseFileId);
            }
          }

有人能看出我做错了什么，请指出正确的方向！

Answer 1

为什么你在为angularjs使用twitter bootstrap？ https://angular-ui.github.io/bootstrap/是一个模块，用于在angularjs中创建类似（制表符等）的引导程序。

为什么我建议这是你在angularjs中使用twitter引导程序时不会一直工作的。

如果您使用角度引导Angular-ui-bootstrap -- unable to disable tabs inside ng-repeat，则可以帮助您禁用标签。

Answer 2

页面加载

$scope.Cssclass="enable";

点击按钮

$scope.tabClick = function (selTabName) {

        if ($('#'+selTabName).hasClass('disabled')) {
                return false;
            }


        if (selTabName == 'tbReady') {
           $scope.Cssclass="Disabled";
        } else {
            $scope.Cssclass="enable";
        }
      }

你在HTML中

 <li id="tbReady" role="presentation" class="{{Cssclass}}"><a data-toggle="tab" href="#ready" ng-click="tabClick()">Ready to Submit</a></li>

我认为它会奏效。

禁用引导选项卡

2 个答案: