0

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

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

有人可以看到我做错了什么并指出我正确的方向吗？

4

2 回答 2

0

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

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

如果您使用角度引导Angular-ui-bootstrap - 无法禁用 ng-repeat中的选项卡将帮助您禁用选项卡。

于 2016-05-20T17:29:54.383 回答
0

在页面加载 

$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>

我认为它会起作用。

于 2017-12-01T06:03:43.860 回答