How to enable only active tab and disable all other tabs by default in Angularjs?

Question

I have four tabs as "Tab1, Tab2, Tab3, Tab4".

By default all tabs should be disabled and active tab should be enabled.

If I click on submit button in active tab then I should automatically navigate to next tab by enabling the next tab and setting it as active and disabling the previous tab.

<li class="myli" ng-repeat="tab in tabs track by $index" ng-class="{active:isSelected($index)}"><a href ng-click="displaySelectedtab(tab, $index)">{{tab}}</a></li>

<div class="panel-body newPanelBody" ng-if="displaytab1 &&  !displaytab2 && !displaytab3 && !displaytab4">
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate>
        <h4>Tab1</h4>
        <br> 
        <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button>
    </form>
</div>

<div class="panel-body newPanelBody" ng-if="displaytab2 &&  !displaytab1 && !displaytab3 && !displaytab4">
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate>
        <h4>Tab2</h4>
        <br> 
        <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button>
    </form>
</div>

<div class="panel-body newPanelBody" ng-if="displaytab3 &&  !displaytab1 && !displaytab2 && !displaytab4">
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate>
        <h4>Tab3</h4>
        <br> 
        <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button>
    </form>
</div>

<div class="panel-body newPanelBody" ng-if="displaytab4 &&  !displaytab1 && !displaytab2 && !displaytab3">
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate>
        <h4>Tab4</h4>
        <br> 
        <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button>
    </form>
</div>

Rogier Pennink · Accepted Answer · 2016-10-26 07:22:06Z

First off, your use of .panel-body and .btn has me assuming you use bootstrap, so have a look here: https://angular-ui.github.io/bootstrap/ There's a tabs component on that page made for use with angular and bootstrap.

Secondly, instead of using booleans to control which tab should show, it is much easier to use an integer to control the currently selected tab. That will also allow you to work with a variable amount of tabs.

<li class="myli" ng-repeat="tab in tabs track by $index" ng-class="{active: selectedIndex == $index}"><a href ng-click="displaySelectedtab(tab, $index)">{{tab}}</a></li>

<div class="panel-body newPanelBody" ng-repeat="tab in tabs track by $index" ng-if="selectedIndex == $index">
    <h4>Tab {{$index + 1}}</h4>

    <!-- If you need different content for each tab you can include an angular template as well -->
    <ng-include src="'path/to/template.tpl.html'"></ng-include>
</div>

It will require you to think about how to store your tab content a little. The easiest way is probably to use templates. In that case you could devise a strategy where your tabs array contains objects that contain both the tab title as well as the content template url, like so:

$scope.tabs = [
    {
        "title": "Tab 1",
        "templateUrl": "path/to/template.tpl.html"
    }
];

Your ng-include would then look like like:

<ng-include src="tab.templateUrl"></ng-include>

Making your form's submit action go to a different tab then becomes a simple matter of changing the $scope.selectedIndex variable to the index of the tab you want opened.

Gourav Garg · Accepted Answer · 2016-10-26 08:30:43Z

0

Change ng-if="displaytab1 && !displaytab2 && !displaytab3 && !displaytab4" to ng-if="$index==selected"

In your button submit function add index like this ng-submit="save($index)"

In controller method:

`$scope.selected=1;  $scope.save= function(index){selected=index+1;}`

answered Oct 26, 2016 at 8:30

Gourav Garg

2,92114 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to enable only active tab and disable all other tabs by default in Angularjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related