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