How to disable angular-ui bootstrap tabs?

Question

I'm trying to create a multi step form in angularjs and angularjs bootstrap.

I have the following html code, buttons on each step that validate current tab and move to the next. What I'm looking for is a "disabled" state for each tab that will be set to true while the form is not validated in current state "isStepClean(0)".

I've tried with class="disabled" and disabled as attribute but didn't work. Any ideas how to do it?

<tabs>
    <pane heading="1. Recipients" active="panes[0].active" disabled="panes[0].disabled">
        ....
        <input type="button" ng-disabled="isStepClean(0)" class="btn btn-info pull-right" ng-click="panes[1].active = true" name="" value="Next step" />
    </pane>
    <pane heading="2. Information" active="panes[1].active" disabled="panes[1].disabled">
         ....
         <input type="button" ng-disabled="isStepClean(1)" class="btn btn-info pull-right" ng-click="panes[2].active = true" name="" value="Next step" />
    </pane>
    <pane heading="3. Preview" active="panes[2].active" disabled="panes[2].disabled">
         ....
         <input type="button" ng-disabled="isStepClean(2)" class="btn btn-info pull-right" ng-click="panes[3].active = true" name="" value="Next step" />
    </pane>
</tabs>

In the controller I have:

$scope.panes = [
        {active:true},
        {active:false},
        {active:false},
        {active:false}
    ];

Answer 1

Someone just informed me that this modification was made already in Angular-UI. It's not on the broken out Angular-Bootstrap, but it is part of the bootstrap component of Angular-UI. Hopefully they'll sync up the changes soon:

https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2

EDIT: previous answer because it took me a while to figure out.

Currently, its not built into Angular-Bootstrap, but you can modify the library like so:

Add a disabled attribute to your pane (below example is with ng-repeat, but you can add it manually as you have in your example):

 <tabs>
     <pane ng-repeat="pane in panes" heading="{{pane.title}}" disabled="{{pane.disabled}}" active="pane.active">{{pane.content}}</pane>
 </tabs>

Then make the following modifications to your ui-bootstrap-tpls.js file if using ui-bootstrap.js I assume you'll know how to modify these instructions for external templates):

Search $templateCache.put("template/tabs/tabs.html"... and add the disabled:pane.disabled property to ng-class (with proper escaping):

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-repeat="pane in panes" ng-class="{active:pane.selected, disabled:pane.disabled}">
      <a ng-click="select(pane)" href="">{{pane.heading}}</a>
    </li>
  </ul>
  <div class="tab-content" ng-transclude></div>
</div>

Search for .directive('pane', ['$parse', function($parse) { and change:

scope:{
  heading:'@'
},

to:

scope:{
  heading:'@',
  disabled:'@'
},

Test it out by adding disabled to the panes array:

$scope.panes = [
        {active:true},
        {active:false, disabled:true},
        {active:false, disabled:true},
        {active:false}
    ];

Now use your validation function (eg, isStepClean() ) to set disabled on the panes array.

Note: this will only apply disabled class to the li elements (ie, this will cosmetically change your li elements to comfort to the disabled class in Twitter Bootstrap). You can add whatever disabling behavior you want as a custom directive.

Answer 2

In case you're using angular-ui tabset, the use of disabled is deprecated. You should use disable instead.

<tabset>
    <tab heading='Tab Title' disable="hasErrors">
        ...

Answer 3

A checkbox added to disable the tab using scope.

If checkbox is true then a function is been triggered, which assigns the value of scope to class attribute {{btnClass}}. By conditional statement in data-toggle we can set this attribute.

data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}"

HTML

<input type="checkbox" ng-model="vm.target[isselected]" name="" ng-click="checkbox(isselected)"> TARGET ALL USERS



    <ul class="nav nav-tabs tabs-left" role="tablist">
  <span class="navTitle">TARGET GROUP</span><!-- 'tabs-right' for right tabs -->
    <li class="active" role="presentation"><a href='' data-target="#everyone" aria-controls="everyone" data-toggle="tab">EVERYONE</a></li>
<li class="{{btnClass}}"><a href='' data-target="#userprofile" aria-controls="userprofile" data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}">USER PROFILE</a></li>
<li class="{{btnClass}}"><a href='' data-target="#customergroup" aria-controls="customergroup" data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}">CUSTOMER GROUP</a></li>
<li class="{{btnClass}}"><a href='' data-target="#customer" aria-controls="customer" data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}">CUSTOMER</a></li>
<li class="{{btnClass}}"><a href='' data-target="#catalog" aria-controls="catalog" data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}">CATALOG</a></li>
<li class="{{btnClass}}"><a href='' data-target="#customerwarehouse" aria-controls="customerwarehouse" data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}">CUSTOMER WAREHOUSE</a></li>
  </ul>

Angularjs

$scope.checkbox = function(isselected) {
if (vm.target[isselected]) {
$scope.btnClass = "disabled";
}
else {
  $scope.btnClass = "";
}
};

Answer 4

使用两个标题相同的选项卡，一个选项卡使用ng-hide="yourDisableCondition" ，另一个选项卡（不需要内容）使用ng-show="yourDisableCondition" AND disabled="true" 。