Prot2-WinFlot

by Guilherme Santana

HTML

<html >
  <head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller='TestCtrl' class="tabbable tabs-left">
      <ul class="nav nav-tabs">
         <li ng-class="getTabClass(1)" ng-click="setActiveTab(1)"><a href="#deal" data-toggle="tab">Transformer</a></li>
         <li ng-class="getTabClass(2)" ng-click="setActiveTab(2)"><a href="#bond" data-toggle="tab">Input</a></li>
         <li ng-class="getTabClass(3)" ng-click="setActiveTab(3)"><a href="#collateral" data-toggle="tab">Ventilator</a></li>
         <li ng-class="getTabClass(4)" ng-click="setActiveTab(4)"><a href="#rating" data-toggle="tab">General</a></li>
      </ul>
      <div class="tab-content">
        <div ng-class="getTabPaneClass(1)" id="deal" class="content">    
           {{tab1}}
         </div>       
        <div ng-class="getTabPaneClass(2)" id="bond" class="content">     
          {{tab2}}
        </div>
        <div ng-class="getTabPaneClass(3)" id="collateral" class="content">     
          {{tab3}}
        </div>
        <div ng-class="getTabPaneClass(4)" id="rating" class="content">     
          {{tab4}}
        </div>      
      </div>
    </div>
  </body>
</html>

CSS

.tab-content {
  margin: 0;
  padding: 0;
}

.content {
  margin: 1em;
  padding: 1em;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('TestCtrl', function($scope){
  var tabClasses;
  
  function initTabs() {
    tabClasses = ["","","",""];
  }
  
  $scope.getTabClass = function (tabNum) {
    return tabClasses[tabNum];
  };
  
  $scope.getTabPaneClass = function (tabNum) {
    return "tab-pane " + tabClasses[tabNum];
  }
  
  $scope.setActiveTab = function (tabNum) {
    initTabs();
    tabClasses[tabNum] = "active";
  };
  
  $scope.tab1 = "FIRST section";
  $scope.tab2 = "SECOND section";
  $scope.tab3 = "THIRD section";
  $scope.tab4 = "FOURTH section";
  
  //Initialize 
  initTabs();
  $scope.setActiveTab(1);
});