Create multiple tabs using Angular JS

Can't figure out how much times I've shared multiple tabs tutorial with jQuery using different techniques and effects. This time we can create a simple multiple tab widget with the least code you could expect using Angular JS.

Demo

See the Pen Angular powered multi tabs by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Angular JS ability to work in HTML is great, let create the basic markup.

<div class="outer" ng-app="tabs">
    <div class="tabs" ng-controller="shift_tabs as shift">
        <div class="tab-buttons">
            <button>Tab 1</button>
            <button>Tab 2</button>
            <button>Tab 3</button>
        </div>
        <div class="tab-content">
            <div>Content 1</div>
            <div>Content 2</div>
            <div>Content 3</div>
        </div>
    </div>
</div>

I've added ng-app and ng-controller in starting. Therefore Javascript would be:

var myApp = angular.module('tabs', []);
myApp.controller('shift_tabs', function () {

});

Basically, advantage of using Angular is to use that basic concept of MVC. We do not have to repeat a function again and again to get the value instead the View keep the eye on data and controller just changes the model whenever the data change happen.

First, create a method that will set the active tab number. Then using ng-init we are going to set the initial tab value. While on other side using ng-show we are setting an eye on active tab number, if that changes tab changes.

var myApp=angular.module('tabs',[]);
myApp.controller('shift_tabs',function(){
  this.activeTab;
  this.makeShift=function(e){
    this.activeTab=e;
  }
  this.isActive=function(f){
    if(f==this.activeTab){
      return true
    }
  }
});

activeTab is initially undefined, makeShift method accepts and argument that actually sets the activeTab value and isActive returns true if activeTab value is equal to the argument. makeShift method is for buttons while isActive is for tab content. Next is to add makeShift on buttons as well as we need to set an initial value. Lets do it.

<div class='tab-buttons' ng-init='shift.makeShift(1)'>
    <button ng-click='shift.makeShift(1)' ng-class='{active:shift.isActive(1)}'>Tab 1</button>
    <button ng-click='shift.makeShift(2)' ng-class='{active:shift.isActive(2)}'>Tab 2</button>
    <button ng-click='shift.makeShift(3)' ng-class='{active:shift.isActive(3)}'>Tab 3</button>
</div>

Using ng-init we just set the initial value as 1. Then on ng-click we set the values according to their tab content. One more thing is active class on active button, for customization purpose only. ng-class sets the class if condition is true. Using isActive we checked the activeTab and returns true if it is active.

<div class='tab-content'>
    <div ng-show='shift.isActive(1)'>Content 1</div>
    <div ng-show='shift.isActive(2)'>Content 2</div>
    <div ng-show='shift.isActive(3)'>Content 3</div>
</div>

Then using ng-show we just bind the div elements to a method, that simply returns true if activeTab value is equal to the argument passed.

Hope this basic tutorial on Angular will help, I'll try to keep up with good stuff about Angular.