Making Tabs in Angular

Posted on

in

,

The js:

(function(){
    var app = angular.module('tabModule',[]);
app.controller('TabController', function(){
    this.tab = 1;
    this.setTab = function(newValue){
      this.tab = newValue;
    };
    this.isSet = function(tabName){
      return this.tab === tabName;
    };
  });

})();

and the HTML

<section class="tab" ng-controller="TabController as panel">
        <ul>
            <li ng-class="{active:panel.isSet(1)}">
                <a ng-click="panel.setTab(1)" href>Description</a></li>
            <li ng-class="{active:panel.isSet(2)}">
                <a ng-click="panel.setTab(2)" href>Specs</a></li>
            <li ng-class="{active:panel.isSet(3)}">
                <a ng-click="panel.setTab(3)" href>Reviews</a></li>
        </ul>
        <div ng-show="panel.tab == 1">
            <h4>Tab 1 Heading</h4>
            <p>Tab 1 text</p>
        </div>
        <div ng-show="panel.tab == 2">
            <h4>Tab 2 Title</h4>
            <p>2nd tab text</p>
        </div>
        <div ng-show="panel.tab == 3">
            <h4>Tab 3 Heading</h4>
            <p>3rd tab text</p>
        </div>
    </section>

It’s basically changing a number variable and then updating the html based on what the number is.

View the demo

Download the demo

Leave a Reply

Your email address will not be published. Required fields are marked *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

May 2024
M T W T F S S
 12345
6789101112
13141516171819
20212223242526
2728293031