Question

我有这个引导导航标签。

<div ng-app="myApp" ng-controller="myCtrl"> 
   <div class="breadcrumb">
       <ul class="nav nav-tabs">
          <li class="active"><a href="#submitted" data-toggle="tab">Submitted</a></li>
          <li><a href="#pendingApproval" data-toggle="tab">Pending Approval</a></li>
          <li><a href="#workInProgress" data-toggle="tab">Work In Progress</a></li>
          <li><a href="#complete" data-toggle="tab">Complete</a></li>
       </ul>
  </div>

  <div class="tab-content" style="margin:5%;">
        <div class="tab-pane active" id="submitted" ng-class="{'active':dataStatus=='submitted'}">
         Submitted data will be displayed here....
      </div>
      <div class="tab-pane" id="pendingApproval" ng-class="{'active':dataStatus=='pending'}">
        Pending Approvals will be displayed here....
      </div>
      <div class="tab-pane" id="workInProgress" ng-class="{'active':dataStatus=='inprogress'}">
         In Progress data will be displayed here....
      </div>
      <div class="tab-pane" id="complete" ng-class="{'active':dataStatus=='completed'}">
         Completed data will be displayed here....
      </div>
  </div>
</div>

在这里，我在dataStatus变量中获得了不同的状态，这是基于将活动类添加到标签中的原因。

我的查询是，如果我在pending中获得dataStatus，则在pending tab我可以访问submitted and pending tab之后应该禁用标签。我应该可以访问in progress and completed标签

与所有状态相同。我应该只根据状态访问以前的选项卡。我该怎么办？有帮助吗？谢谢！

小提琴：https://jsfiddle.net/70Luf7hu/76/

Answer 1

您可以使用单独的类来禁用li元素，并根据ng-class中的要求添加条件/表达式。下面是jsfiddle链接

小提琴：https://jsfiddle.net/anilsarkar/9xf5neyz/17/

.disabled {
pointer-events:none; 
opacity:0.6;

}

   <ul class="nav nav-tabs">
      <li class="active"><a href="#submitted" data-toggle="tab">Submitted</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted'}"><a href="#pendingApproval" data-toggle="tab">Pending Approval</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending'}"><a href="#workInProgress" data-toggle="tab">Work In Progress</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending' || dataStatus=='inprogress'}"><a href="#complete" data-toggle="tab">Complete</a></li>
   </ul>

注意：我添加了一个禁用的类来禁用li元素

根据状态禁用导航标签

1 个答案: