根据状态禁用导航选项卡

我有这个引导导航标签。

<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 在里面 数据状态 ,之后应禁用选项卡 pending tab 我可以进入 submitted and pending tab 我应该可以进入 in progress and completed 标签。

与所有状态相同。我应该根据状态只访问以前的选项卡。我该如何做?有什么帮助吗?谢谢!啊!

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