Problem statement
Consider where you want to put Tabs on a page and each tab should be attached to different functions but due Bootstrap the tab events do not work. Finally cracked it and sharing with my readers:
Prerequisites
- AngularJS
- Bootstrap
- HTML
- CSS
- JavaScript
Code example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body ng-cloak> <div class="filterContainer"> <div ng-app=""> <div class="container"> <div class="ods-box" ng-init="tabselector = 'firsttab'"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="active"> <a data-toggle="tab" ng-click="tabselector = 'firsttab'" ng-class="{'activetab' : tabselector == 'firsttab'}">Tab1</a></li> <li class="active"> <a data-toggle="tab" ng-click="tabselector = 'secondtab'" ng-class="{'activetab' : tabselector == 'secondtab'}">Tab2</a></li> <li class="active"> <a data-toggle="tab" ng-click="tabselector = 'thirdtab'" ng-class="{'activetab' : tabselector == 'thirdtab'}">Tab3</a></li> <li class="active"> <a data-toggle="tab" ng-click="tabselector = 'fourthtab'" ng-class="{'activetab' : tabselector == 'fourthtab'}">Tab4</a></li> <li class="active"> <a data-toggle="tab" ng-click="tabselector = 'fifthtab'" ng-class="{'activetab' : tabselector == 'fifthtab'}">Tab5</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div ng-if="tabselector == 'firsttab'" class="container tab-pane active"> <br> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-4"> <label>Select Year:</label> </div> <div class="col-md-8"> <select class="custom-select form-control" id="selectyear" [(ngModel)]="data.type" name="selectyear" formControlName="selectyear"> <option value="" selected>Select Year</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> </select> </div> </div></br> <div class="row"> <div class="col-md-4"> <label>Select Type:</label> </div> <div class="col-md-8"> <select class="custom-select form-control" id="input" onchange="mytypes()"> <option selected>Select Type</option> <option>Monthly</option> <option>Quaterly</option> </select> </div> </div></br> <div class="row"> <div class="col-md-4"> <label>File Upload:</label> </div> <div class="col-md--8"> <form name="uploadForm" enctype="multipart/form-data"> <div class="l relTopSelect" style="position: relative; height: 4px; background-color: white; width: 90%; border-radius: 2px; top: -9px;"> <button type="button" class="l" ng-file-select type="button" name="file" ng-model="documentImage.file" class="btn-submit" id="file" style="overflow: hidden;outline:none; background-color: #D4D4D4;border-radius: 2px;height: 30px; padding: 1% 3%;border: 1px solid #e1e2e3;color: #5D5C5C;font-size: 13px;font-family: RobotoRegular;"> Upload File</button> <div ng-cloak class="l" id="file" style="color: #616060;font-size: 13px;font-family: RobotoRegular;overflow: hidden;text-overflow: ellipsis;width: 77%;">{{ documentImage.file[0].name }}</div> </div><span style="color:red;position: relative;top: 18px;left: 4px;"> *</span> <div class="r" style="font-size: 12px; color: #D42A2A; font-weight: bold;">Upload File Type: .xls , .xlsx </div> </form> </div> </div> <div class="row"> <div class="col-md-12"> <div class="col-sm-12 col-sm-12" style="margin-top:1%"> <input type="button" class="submitBtn" value = "Submit" ng-click="onSubmit()" style="margin-top: 2.5%;float: left;"> <span class="errorMsg" ng-hide="showErrorMsg">{{ErrorMsg}}</span> <input type="button" class="exportBtn" value="Export Existing Data" ng-click="exportExistingData()" style="margin-right:0%;margin-top: 2.5%;"> <input type="button" class="exportBtn" value="Download Template" ng-click="downloadPjpUploadTemplate()" style="margin-right:0%;margin-top: 2.5%;"> <input ng-cloak class="exportBtn" type="button" value="Export Errors" ng-if = "errorFile.length > 0" ng-click="exportErrorFile()" style="float:right;margin-right: 2%;margin-top: 2.5%;"> </div> </div> </div></br> </div> </div> </div> </div></br> </div></br> <div ng-if="tabselector == 'secondtab'" > <br> <div class="col-sm-6 col-md-6"> <form name="uploadForm" enctype="multipart/form-data"> <div class="l relTopSelect" style="position: relative;height: 32px;background-color: white; width: 90%;border: 1px solid #C3C3C3;border-radius: 2px;top: 20px;"> <button type="button" class="l" ng-file-select type="button" name="file" ng-model="documentImage.file" class="btn-submit" id="file" style="overflow: hidden;outline:none; background-color: #D4D4D4;border-radius: 2px;height: 30px; padding: 1% 3%;border: 1px solid #e1e2e3;color: #5D5C5C;font-size: 13px;font-family: RobotoRegular;"> Upload File</button> <div ng-cloak class="l" id="file" style="color: #616060;margin-left: 2%;margin-top: 1.5%;font-size: 13px;font-family: RobotoRegular;overflow: hidden;text-overflow: ellipsis;width: 77%;">{{ documentImage.file[0].name }}</div> </div><span style="color:red;position: relative;top: 18px;left: 4px;"> *</span> <div class="r" style="font-size: 12px; color: #D42A2A; font-weight: bold;position: relative;top: 24px;left: -56px;">Upload File Type: .xls , .xlsx </div> </form> </div> <div class="col-sm-12 col-sm-12" style="margin-top:1%"> <input type="button" class="submitBtn" value = "Submit" ng-click="onSubmit()" style="margin-top: 2.5%;float: left;"> <span class="errorMsg" ng-hide="showErrorMsg">{{ErrorMsg}}</span> <input type="button" class="exportBtn" value="Export Existing Data" ng-click="exportExistingData()" style="margin-right:0%;margin-top: 2.5%;"> <input type="button" class="exportBtn" value="Download Template" ng-click="downloadPjpUploadTemplate()" style="margin-right:0%;margin-top: 2.5%;"> <input ng-cloak class="exportBtn" type="button" value="Export Errors" ng-if = "errorFile.length > 0" ng-click="exportErrorFile()" style="float:right;margin-right: 2%;margin-top: 2.5%;"> </div> </div> <div ng-if="tabselector == 'thirdtab'" > <br> <div class="col-sm-6 col-md-6"> <form name="uploadForm" enctype="multipart/form-data"> <div class="l relTopSelect" style="position: relative;height: 32px;background-color: white; width: 90%;border: 1px solid #C3C3C3;border-radius: 2px;top: 20px;"> <button type="button" class="l" ng-file-select type="button" name="file" ng-model="documentImage.file" class="btn-submit" id="file" style="overflow: hidden;outline:none; background-color: #D4D4D4;border-radius: 2px;height: 30px; padding: 1% 3%;border: 1px solid #e1e2e3;color: #5D5C5C;font-size: 13px;font-family: RobotoRegular;"> Upload File</button> <div ng-cloak class="l" id="file" style="color: #616060;margin-left: 2%;margin-top: 1.5%;font-size: 13px;font-family: RobotoRegular;overflow: hidden;text-overflow: ellipsis;width: 77%;">{{ documentImage.file[0].name }}</div> </div><span style="color:red;position: relative;top: 18px;left: 4px;"> *</span> <div class="r" style="font-size: 12px; color: #D42A2A; font-weight: bold;position: relative;top: 24px;left: -56px;">Upload File Type: .xls , .xlsx </div> </form> </div> <div class="col-sm-12 col-sm-12" style="margin-top:1%"> <input type="button" class="submitBtn" value = "Submit" ng-click="onSubmit()" style="margin-top: 2.5%;float: left;"> <span class="errorMsg" ng-hide="showErrorMsg">{{ErrorMsg}}</span> <input type="button" class="exportBtn" value="Export Existing Data" ng-click="exportExistingData()" style="margin-right:0%;margin-top: 2.5%;"> <input type="button" class="exportBtn" value="Download Template" ng-click="downloadPjpUploadTemplate()" style="margin-right:0%;margin-top: 2.5%;"> <input ng-cloak class="exportBtn" type="button" value="Export Errors" ng-if = "errorFile.length > 0" ng-click="exportErrorFile()" style="float:right;margin-right: 2%;margin-top: 2.5%;"> </div> </div> <div ng-if="tabselector == 'fourthtab'" > <!-- <div class="col-sm-2 col-md-2"> <div class="formLabel">Select Type<span style="color:red;"> *</span></div><br> <select class="inputSelectField" id='circle' name='circle' ng-model = "circle" style="width: 100%;padding: 3% 2%;" required> <option ng-repeat = "row in selectType" value={{row}} >{{row}}</option> </select> </div> --> <div class="col-sm-6 col-md-6"> <form name="uploadForm" enctype="multipart/form-data"> <div class="l relTopSelect" style="position: relative;height: 32px;background-color: white; width: 90%;border: 1px solid #C3C3C3;border-radius: 2px;top: 20px;"> <button type="button" class="l" ng-file-select type="button" name="file" ng-model="documentImage.file" class="btn-submit" id="file" style="overflow: hidden;outline:none; background-color: #D4D4D4;border-radius: 2px;height: 30px; padding: 1% 3%;border: 1px solid #e1e2e3;color: #5D5C5C;font-size: 13px;font-family: RobotoRegular;"> Upload File</button> <div ng-cloak class="l" id="file" style="color: #616060;margin-left: 2%;margin-top: 1.5%;font-size: 13px;font-family: RobotoRegular;overflow: hidden;text-overflow: ellipsis;width: 77%;">{{ documentImage.file[0].name }}</div> </div><span style="color:red;position: relative;top: 18px;left: 4px;"> *</span> <div class="r" style="font-size: 12px; color: #D42A2A; font-weight: bold;position: relative;top: 24px;left: -56px;">Upload File Type: .xls , .xlsx </div> </form> </div> <div class="col-sm-12 col-sm-12" style="margin-top:1%"> <input type="button" class="submitBtn" value = "Submit" ng-click="onSubmit()" style="margin-top: 2.5%;float: left;"> <span class="errorMsg" ng-hide="showErrorMsg">{{ErrorMsg}}</span> <input type="button" class="exportBtn" value="Export Existing Data" ng-click="exportExistingData()" style="margin-right:0%;margin-top: 2.5%;"> <input type="button" class="exportBtn" value="Download Template" ng-click="downloadPjpUploadTemplate()" style="margin-right:0%;margin-top: 2.5%;"> <input ng-cloak class="exportBtn" type="button" value="Export Errors" ng-if = "errorFile.length > 0" ng-click="exportErrorFile()" style="float:right;margin-right: 2%;margin-top: 2.5%;"> </div> </div> <div ng-if="tabselector == 'fifthtab'" > <br> <div class="col-sm-6 col-md-6"> <form name="uploadForm" enctype="multipart/form-data"> <div class="l relTopSelect" style="position: relative;height: 32px;background-color: white; width: 90%;border: 1px solid #C3C3C3;border-radius: 2px;top: 20px;"> <button type="button" class="l" ng-file-select type="button" name="file" ng-model="documentImage.file" class="btn-submit" id="file" style="overflow: hidden;outline:none; background-color: #D4D4D4;border-radius: 2px;height: 30px; padding: 1% 3%;border: 1px solid #e1e2e3;color: #5D5C5C;font-size: 13px;font-family: RobotoRegular;"> Upload File</button> <div ng-cloak class="l" id="file" style="color: #616060;margin-left: 2%;margin-top: 1.5%;font-size: 13px;font-family: RobotoRegular;overflow: hidden;text-overflow: ellipsis;width: 77%;">{{ documentImage.file[0].name }}</div> </div><span style="color:red;position: relative;top: 18px;left: 4px;"> *</span> <div class="r" style="font-size: 12px; color: #D42A2A; font-weight: bold;position: relative;top: 24px;left: -56px;">Upload File Type: .xls , .xlsx </div> </form> </div> <div class="col-sm-12 col-sm-12" style="margin-top:1%"> <input type="button" class="submitBtn" value = "Submit" ng-click="onSubmit()" style="margin-top: 2.5%;float: left;"> <span class="errorMsg" ng-hide="showErrorMsg">{{ErrorMsg}}</span> <input type="button" class="exportBtn" value="Export Existing Data" ng-click="exportExistingData()" style="margin-right:0%;margin-top: 2.5%;"> <input type="button" class="exportBtn" value="Download Template" ng-click="downloadPjpUploadTemplate()" style="margin-right:0%;margin-top: 2.5%;"> <input ng-cloak class="exportBtn" type="button" value="Export Errors" ng-if = "errorFile.length > 0" ng-click="exportErrorFile()" style="float:right;margin-right: 2%;margin-top: 2.5%;"> </div> </div> </div> </div> </div> </div> </div> </body> </html>
Output

Please leave your comments or queries under comment section also please do subscribe to out blogs to keep your self upto date.