CODEWITHSUNDEEP
javascriptangularjstabs
kalai
kalai

Reputation: 187

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

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>

Upvotes: 1

Views: 2658

Answers (2)

Gourav Garg
Gourav Garg

Reputation: 2911

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

Upvotes: 0

Rogier Pennink
Rogier Pennink

Reputation: 418

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.

Upvotes: 0

Related Questions