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

Kyle Cureau · Accepted Answer · 2013-06-10 18:53:31Z

4

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 (e.g., isStepClean()) to set disabled on the panes array.

Note: this will only apply disabled class to the li elements (i.e., 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.

edited Jun 10, 2013 at 18:53

answered Jun 9, 2013 at 0:42

Kyle Cureau

19.5k23 gold badges78 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

forgottofly Over a year ago

$scope.panes array should be set in controller?

Kyle Cureau Over a year ago

Hey @MAJOJ, sorry didn't see this question. But yes. :)

downhand · Accepted Answer · 2016-06-02 13:46:41Z

1

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

answered Jun 2, 2016 at 13:46

downhand

3951 gold badge9 silver badges23 bronze badges

1 Comment

NealR Over a year ago

Worked for me. I'm using Angular-UI Bootsrap v1.33: angular-ui.github.io/bootstrap

Surya R Praveen · Accepted Answer · 2017-01-31 14:07:19Z

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 = "";
}
};

Vivek · Accepted Answer · 2015-11-20 10:26:03Z

0

Use two tabs with identical title, one with ng-hide="yourDisableCondition", the other (which needs no content) with ng-show="yourDisableCondition" AND disabled="true".

edited Nov 20, 2015 at 10:26

Vivek

13.6k19 gold badges101 silver badges140 bronze badges

answered Nov 20, 2015 at 9:45

pakoe

1

Collectives™ on Stack Overflow

How to disable angular-ui bootstrap tabs?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related