I'm attempting to build a simple slide out menu, I have it working fine using the menu button.
<div class="menu-button" ng-click="show_menu = !show_menu"></div>
<div class="side-menu" ng-class="{true: 'show_menu'}[show_menu]">
<div class="filters-generic filter-{{filter.filter_type}}" ng-repeat="filter in filters" ng-click="show_menu = !show_menu;filterby(filter.filter_type)">{{filter.filter_type}}</div>
</div>
CSS
.side-menu {
left: -25%;
position: absolute;
transition: all 0.2s linear 0s;
width: 25%;
background: #000;
}
.side-menu.show_menu {
left:0%;
}
When I press the menu-button
div it works fine (ie it adds the class), however I also want to be able to close the menu when an item inside it is picked, I have tried the above but nothing is happening.
I thought originally it had to do with the fact that its calling another function too, but I even removed that and there's still the same issue. Am I misunderstanding how ng-click
works?
ng-repeat
directive create new scope - child to scope where your show_menu
exists. So by clicking on menu item (some filter I think) you is changing show_menu
in that child scope actually. But ng-class
watches for show_menu
in parent scope, which was not changed.
For more information read here: https://github.com/angular/angular.js/wiki/Understanding-Scopes
PS : You can write ng-class
:
<div class="side-menu" ng-class="{ 'show_menu': show_menu }">
which much more concise and clearly, I think.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.