禁用引导选项卡答案

【问题标题】：Disable bootstrap tab禁用引导选项卡
【发布时间】：2016-05-20 17:13:44
【问题描述】：

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

  <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);
            }
          }

谁能看到我做错了什么并指出我正确的方向！

【问题讨论】：

标签： angularjs twitter-bootstrap bootstrap-tabs

【解决方案1】：

为什么你在 angularjs 中使用 twitter 引导程序？ https://angular-ui.github.io/bootstrap/ 是一个模块，用于在 angularjs 中制作引导程序，例如（选项卡等）。

为什么我建议这是当你在 angularjs 中使用 twitter bootstrap 时，它不会一直工作。

如果您使用 angular bootstrap Angular-ui-bootstrap -- unable to disable tabs inside ng-repeat 将帮助您禁用选项卡。

【讨论】：

您可能是对的，但由于项目的大小，目前无法更改它。因此，如果我们能够在不更改引导程序的情况下找到解决方案，那就太好了。

【解决方案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>

我认为它会起作用。

【讨论】：