Implementing angularJs factory or service for bootstrap tabs -
how write service or factory bootstrap tabs using angularjs. placed in 1 controller need common function(repeated code) different controllers.
<ul class="nav nav-tabs"> <li data-ng-class="{active:tab===0}"> <a href ng-click="changetab(0)"> <i class="fa fa-list"></i></a> </li> <li data-ng-class="{active:tab===1}"> <a href ng-click="changetab(1)"><i class="fa fa-user"></i></a> </li> </ul> <div data-ng-class="{activetab:tab===0}" ng-show="isactivetab(0)"> tab1 </div> <div data-ng-class="{activetab:tab===1}" ng-show="isactivetab(1)"> tab2 </div> controller
$scope.tab = 0; $scope.changetab = function(newtab){ $scope.tab = newtab; }; $scope.isactivetab = function(tab){ return $scope.tab === tab; };
hi write out using service or factory see example
<ul ng-init="tab = 1"> <li ng-class="{active:tab===1}"> <a href ng-click="tab = 1">tab1</a> </li> <li ng-class="{active:tab===2}"> <a href ng-click="tab = 2">tab2</a> </li> <li ng-class="{active:tab===3}"> <a href ng-click="tab = 3">tab3</a> </li> <br><br> <p ng-show="tab === 1"> tab1 content </p> <p ng-show="tab === 2"> tab2 content</p> <p ng-show="tab === 3"> tab3 content</p> </ul> dynamically change through controller see working example here