AngularJS Tabbed Content

by Mike McBride

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="animalCtrl">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <span class="navbar-brand">Bootstrap tabs example</span>
      </div>
    </div>
  </nav>
  <div class="container">
    <p>Here is an example of using <code>ng-if</code> with tabs to conditionally display content.</p>
    
    <ul class="nav nav-tabs">
      <li role="presentation" ng-class="{ 'active': activeTab === 'dogs'}">
        <a ng-click="setActiveTab('dogs')">Dogs</a>
      </li>
      <li role="presentation" ng-class="{ 'active': activeTab === 'cats'}"><a ng-click="setActiveTab('cats')">Cats</a>
      </li>
      <li role="presentation" ng-class="{ 'active': activeTab === 'birds'}">
        <a ng-click="setActiveTab('birds')">Birds</a>
      </li>
    </ul>
    
    <div class="content-area">
    
      <!-- this section will only show if the activeTab value is set to dogs -->
      <section ng-if="activeTab === 'dogs'">Dogs are cute and furry and super fun pets.</section>

      <!-- this section will only show if the activeTab value is set to cats -->
      <section ng-if="activeTab === 'cats'">Cats are cuddly but also they think they are smarter than you and are always planning their escape.</section>

      <!-- this section will only show if the activeTab value is set to birds -->
      <section ng-if="activeTab === 'birds'">Birds have wings and can fly so you have to keep them in a cage or else they will fly away from you and you will be sad.</section>
    
    
    </div>
  </div>
</div>

CSS

.content-area {
  padding: 10px;
  border: 1px solid #d8d8d8;
  border-top: 0;
  min-height: 150px;
}

.nav.nav-tabs a {
  cursor: pointer;
}

JavaScript

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

myApp.controller('animalCtrl', ['$scope', function($scope) {
  $scope.activeTab = 'dogs'
  
  $scope.setActiveTab = function (val) {
  	$scope.activeTab = val
  }
}])