Select first tab by default on Button Click in AngularJS

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

I have 2 tabs on form

by default i need to select one tab

in form i need to display Volvo value by deafult and highlight selected tab on form by default

could you please check it and help me

@{ 
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></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">
                <div class="col-xs-6">
                    <a href="#" class="active" id="login-form-link" ng-click="allowence()">Allowence</a>
                </div>
                <div class="col-xs-6">
                    <a href="#" id="register-form-link" ng-click="deduction()">Deduction</a>
                </div>
            </div>
            <hr>
        </div>
    </div>
    <div ng-show="form">
        <h1>{{carname}}</h1>
    </div>
    <div ng-show="form1">
        <h1>{{carname1}}</h1>
    </div>
<script>
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.allowence = function () {
        $scope.form = true;
        $scope.form1 = false;
    }
    $scope.deduction = function () {
        $scope.form1 = true;
        $scope.form = false;
    }
});
</script>
</body>
</html>

 

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago Modified on one month ago

Hi mahesh213,

Refer below code.

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <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">
                <div class="col-xs-6" ng-style="HighlightAllowence">
                    <a href="#" class="active" id="login-form-link" ng-click="allowence()">Allowence</a>
                </div>
                <div class="col-xs-6" ng-style="HighlightDeduction">
                    <a href="#" id="register-form-link" ng-click="deduction()">Deduction</a>
                </div>
            </div>
            <hr>
        </div>
    </div>
    <div ng-show="form">
        <h1>{{carname}}</h1>
    </div>
    <div ng-show="form1">
        <h1>{{carname1}}</h1>
    </div>
</body>
</html>

Demo