Create Tabs in AngularJS with bootstrap ng-if validations

Create Tabs in AngularJS with bootstrap ng-if validations

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.

facebookShare on Facebook
TwitterTweet

Leave a Reply

Your email address will not be published.