uiview - Angularjs : ui-sref state change in url not showing submenu -
in angularjs show/hide dynamic submenu, adding , removing dynamic classes in js file. every time when state changes in url (i.e ui-sref={{mymenu.url}}) sub menu not visible. if there no state change sub menu working properly. can please suggest.
html
<li ng-repeat='mymenu in menuitems' ng-click="showhidemenu($event);" > <a class="iconsize" ui-sref={{mymenu.url}}> <i class={{mymenu.image}}></i> <strong>{{mymenu.menuname}}</strong> <span class="fa fa-chevron-down"></span> </a> <ul class="submenuhide"> <li class="" ng-repeat='submenu in mymenu.submenu'> <a>{{submenu.submenuname}}</a> </li> </ul> js
$scope.showhidemenu = function(event) { var classname = event.target.parentelement.parentelement.children[1].classname; if(classname == 'submenuhide'){ $(event.target.parentelement.parentelement.children[1]).removeclass('submenuhide'); $(event.target.parentelement.parentelement.children[1]).addclass('submenushow'); }else if(classname == 'submenushow'){ $(event.target.parentelement.parentelement.children[1]).removeclass('submenushow'); $(event.target.parentelement.parentelement.children[1]).addclass('submenuhide'); } }
a couple things. one, you'll need make sure menu outside of individual templates you're working with. two, using ng-class bound ng-model ensures menu state included in digest cycle. save jqlite , dom parsing logic.
here's example plunker.
so code might this:
<body ng-controller="mainctrl"> <a ui-sref="hello">hello</a> <a ui-sref="about">about</a> <button ng-click="togglemenu()">show / hide menu</button> <ui-view></ui-view> <ul ng-class="{showmenu: show, hidemenu: !show}"> <li ng-repeat="letter in ['a','b','c','d']">{{letter}}</li> </ul> </body> with js:
app.controller('mainctrl', function($scope) { $scope.show = false; $scope.togglemenu = function() { $scope.show = !$scope.show; }; });
Comments
Post a Comment