Set Tab Active class on Click in AngularJS

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hi,

I have 2 tabs on form

currently by deafult it was selecting one tab

currently my requirement is that make tabs active and inactive after clicking of releavant tabs.

@{ 
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.form = false;
            $scope.form1 = false;
            $scope.carname = "Volvo";
            $scope.carname1 = "Volvo1";
            $scope.tabs = false;
            $scope.Add = function () {
                $scope.tabs = true;
                $scope.form = true;
                $scope.HighlightAllowence = {
                    "color": "white",
                    "background-color": "coral"
                }
            }
            $scope.allowence = function () {
                $scope.form = true;
                $scope.form1 = false;
                $scope.HighlightAllowence = {
                    "color": "white",
                    "background-color": "coral"
                }
                $scope.HighlightDeduction = {}
            }
            $scope.deduction = function () {
                $scope.form1 = true;
                $scope.form = false;
                $scope.HighlightDeduction = {
                    "color": "white",
                    "background-color": "coral"
                }
                $scope.HighlightAllowence = {}
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="Add();" style="margin-left: 15px;">
        Add
    </button>
    <div ng-show="tabs">
        <div class="panel-heading">
            <div class="row">
                <ul class="nav nav-pills">
                    <li class="active" @*ng-style="HighlightAllowence"*@><a href="#" ng-click="kyc()">Allowence</a></li>
                    <li><a href="#" ng-click="deduction()">Deduction</a></li>
                   
                </ul>
               
            </div>
            <hr>
        </div>
    </div>
    <div ng-show="form">
        <h1>{{carname}}</h1>
    </div>
    <div ng-show="form1">
        <h1>{{carname1}}</h1>
    </div>
</body>
</html>

 

Posted 3 months ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Active Bootstrap Tab</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.carname = "Volvo";
            $scope.carname1 = "Volvo1";
            $scope.tabs = false;
            $scope.Add = function () {
                $scope.tabs = true;
                $scope.FormShown = 'Allowence';
                $scope.TabActived = 'Allowence';
            }
            $scope.ActiveTab = function (tab) {
                $scope.FormShown = tab;
                $scope.TabActived = tab;
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="Add();" style="margin-left: 15px;" class="btn btn-Success btn-sm">
        Add
    </button>
    <div ng-show="tabs">
        <div class="panel-heading">
            <div class="row">
                <ul class="nav nav-pills">
                    <li ng-class="{'active': TabActived == 'Allowence'}"><a href="#" ng-click="ActiveTab('Allowence')">
                        Allowence</a> </li>
                    <li ng-class="{'active': TabActived == 'Deduction'}"><a href="#" ng-click="ActiveTab('Deduction')">
                        Deduction</a> </li>
                </ul>
            </div>
        </div>
    </div>
    <div ng-show="FormShown=='Allowence'">
        <h1>{{carname}}</h1>
    </div>
    <div ng-show="FormShown=='Deduction'">
        <h1>{{carname1}}</h1>
    </div>
</body>
</html>

Demo