set active tabs using AngularJS

Question

I have set of three Html tabs like this :

<div class="container" ng-controller="tabCtrl">         
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" ng-click="toggle_over1()" href="#!home/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" ng-click="toggle_over2()"  href="#!/underwriting">Underwriting</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" ng-click="toggle_over3()" href="#!operations/">Operations</a>
          </li>
        </ul>
    </div>

when ever I click on the tab it should get active. I am trying to implement it using angularjs. I tried to implement it in so many ways, but I couldn't achieve it. Please let me know, if there is any better.

AngularJS :

app.controller('tabCtrl',function($scope) {
$scope.toggle_over = function(id) {
    // implementation part
    }
});

Use ng-class or ng-style. Add active class after clicked on tabs. — Kaustubh Khare
– Kaustubh Khare, Commented Nov 6, 2017 at 10:16
you call toggle_over1() instead of toggle_over(1) and also with the other two links? Guess that's a typo in your question? — malifa
– malifa, Commented Nov 6, 2017 at 10:17

jitender · Accepted Answer · 2017-11-06 10:21:01Z

1

What about

 <ul class="nav nav-pills">
            <li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Home</a></li>
            <li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Underwriting</a></li>
            <li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Operations</a></li>
        </ul>

        <div ng-show="tab.isSet(1)"><h4>Home</h4></div>
        <div ng-show="tab.isSet(2)"><h4>Underwriting</h4></div>
        <div ng-show="tab.isSet(3)"> <h4>Operations</h4></div>


    $scope.tab = 1;

    $scope.setTab = function (tabId) {
        this.tab = tabId;
    };

    $scope.isSet = function (tabId) {
        return this.tab === tabId;
    };

Working demo

answered Nov 6, 2017 at 10:21

jitender

10.4k1 gold badge22 silver badges49 bronze badges

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

Comments

Álvaro Touzón · Accepted Answer · 2017-11-06 10:23:52Z

Here is a demo using angular 1.3, any version will works the example is simple, only using the view and ng-class

<div class="container" ng-controller="tabCtrl">         
        <ul class="nav nav-pills">
          <li class="nav-item" ng-class="{'active': active===1}">
            <a class="nav-link active" ng-click="active=1;" href="#!home/">Home</a>
          </li>
          <li class="nav-item" ng-class="{'active': active===2}">
            <a class="nav-link active" ng-click="active=2"  href="#!/underwriting">Underwriting</a>
          </li>
          <li class="nav-item" ng-class="{'active': active===3}">
            <a class="nav-link active" ng-click="active=3" href="#!operations/">Operations</a>
          </li>
        </ul>
    </div>

Collectives™ on Stack Overflow

set active tabs using 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