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.
Leave a Reply