Tabs

Elements that organize information display.

Twitter bootstrap comes with a class element that allow us to build such tabs

<section>
  <ul class="nav nav-pills">
    <li><a href ng-click="tab = 1"> Description </li>
    <li><a href ng-click="tab = 2"> Specification </li>
    <li><a href ng-click="tab = 3"> Reviews </li>
  </ul>
 {{tab}}
</section>

Adding tabs content panel

<section ng-init="tab = 1">
  <ul class="nav nav-pills">
    <li ng-class="{ active:tab === 1 }"><a href ng-click="tab = 1"> Description </li>
    <li ng-class="{ active:tab === 2 }"><a href ng-click="tab = 2"> Specification </li>
    <li ng-class="{ active:tab === 3 }"><a href ng-click="tab = 3"> Reviews </li>
  </ul>
 <div class="panel" ng-show="tab === 1">
   <h4>Description </h4>
   <p>{{product.description}} </p>
 </div>
 <div class="panel" ng-show="tab === 2">
  <h4>Description </h4>
  <p>{{product.description}} </p>
 </div>
 <div class="panel" ng-show="tab === 3">
  <h4>Description </h4>
  <p>{{product.description}} </p>
 </div>
</section>

Creating a Panel Controller

Within the .html code

<section ng-controller="PanelController as panel">
  <ul class="nav nav-pills">
    <li ng-class="{ active:panel.isSelected(1) }"><a href ng-click="panel.selectTab(1)"> Description </li>
    <li ng-class="{ active:panel.isSelected(2) }"><a href ng-click="panel.selectTab(2)"> Specification </li>
    <li ng-class="{ active:panel.isSelected(3) }"><a href ng-click="panel.selectTab(3)"> Reviews </li>
  </ul>
 <div class="panel" ng-show="panel.isSelected(1)">
   <h4>Description </h4>
   <p>{{product.description}} </p>
 </div>
 <div class="panel" ng-show="panel.isSelected(2)">
  <h4>Description </h4>
  <p>{{product.description}} </p>
 </div>
 <div class="panel" ng-show="panel.isSelected(3)">
  <h4>Description </h4>
  <p>{{product.description}} </p>
 </div>
</section>

Within the .js file

app.controller("PanelController", function(){
  this.tab = 1;
 
  this.selectTab = function(setTab){
    this.tab = setTab;
  };

  this.isSelected = function(checkTab){
    return this.tab === checkTab;
  };
});