AngularJS Tabs

by alex fripp

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <section ng-app="myApp" ng-controller="TabController as tab">
        <ul class="nav nav-pills">
            <li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Plans</a></li>
            <li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Active Plan</a></li>
            <li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Analysis</a></li>
        </ul>
        
        <div class="section" ng-show="tab.isSet(1)">
             <h4>All Plans</h4>
            <div>2015 - plan</div>
            <div>2014 - plan</div>
        </div>
        <div class="section" ng-show="tab.isSet(2)">
             <h4>2015 - plan</h4>
            <p>data</p>
        </div>
        <div class="section" ng-show="tab.isSet(3)">
             <h4>Analysis</h4>
        </div>
    </section>
</div>

CSS

.section{
    background:#f9f9f9;
    min-height:10em;
}

JavaScript

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

    app.controller('TabController', function () {
        this.tab = 1;

        this.setTab = function (tabId) {
            this.tab = tabId;
        };

        this.isSet = function (tabId) {
            return this.tab === tabId;
        };
    });