CODEWITHSUNDEEP
javascriptjqueryangularjs
krish
krish

Reputation: 1117

Disable nav tabs based on status

I have this bootstrap nav tab.

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

here I am getting different status in dataStatus variable,based on that am adding active class to a tab.

My Query is If I get pending in dataStatus ,tabs should be disabled after pending tab I can access submitted and pending tab.I should can access in progress and completed tab.

Same as all status. I should access only the previous tabs based on status.how can I do it?Any help?Thanks!!

fiddle : https://jsfiddle.net/70Luf7hu/76/

Upvotes: 0

Views: 1015

Answers (1)

Anil Sarkar
Anil Sarkar

Reputation: 160

You can use a separate class for disabling the li element and add conditions/expressions as per your requirement in the ng-class. Below is the jsfiddle link

fiddle : 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>

Note: I have added a disabled class to disable the li element

Upvotes: 1

Related Questions