javascript - How can we handle multiple click events using one function in angularjs? -
i trying handle multiple click events of bootstrap accordion tab in 1 function, unable handle that. want functionality that:-
(1) if user click on accordion tab icon should change minus(-).
(2) if user click on accordion tab other opened tab should closed.
i able using different function every tab. have handle using 1 function have multiple tabs.
here html code:-
<div ng-controller="tabcontroller"> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle" ng-click="clickontab($event,'firsttab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapseone"> <div class="mid-col"> <h5>first tab</h5> </div> <div class="right-col"> <div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'firsttab']"></div> </div> </a> <div id="collapseone" class="panel-collapse collapse"> <div class="panel-body"> content of first tab<br/> 1. when tab open icon should minus (-). working fine when playing 1 tab. when try open tab while tab open iam getting issue. <br/> 2. when open tab other (opened) tab should closed. </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle" ng-click="clickontab($event,'secondtab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapsetwo"> <div class="mid-col"> <h5>second tab</h5> </div> <div class="right-col"> <div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'secondtab']"></div> </div> </a> <div id="collapsetwo" class="panel-collapse collapse"> <div class="panel-body"> content of second tab<br/> 1. when tab open icon should minus (-). working fine when playing 1 tab. when try open tab while tab open iam getting issue. <br/> 2. when open tab other (opened) tab should closed. </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle" ng-click="clickontab($event,'thirdtab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapsethree"> <div class="mid-col"> <h5>first tab</h5> </div> <div class="right-col"> <div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'thirdtab']"></div> </div> </a> <div id="collapsethree" class="panel-collapse collapse"> <div class="panel-body"> content of third tab<br/> 1. when tab open icon should minus (-). working fine when playing 1 tab. when try open tab while tab open iam getting issue. <br/> 2. when open tab other (opened) tab should closed. </div> </div> </div> </div> here controller:-
var myapp = angular.module('plunker', []); myapp.controller("tabcontroller",function($scope){ $scope.clickontab = function($event,val){ console.log($event); //console.log($event.currenttarget); $scope.tabrighticon = !$scope.tabrighticon; console.log($scope.tabrighticon); if($scope.tabrighticon) $scope.tabicon = val; else $scope.tabicon = 1; }; });
Comments
Post a Comment