CODEWITHSUNDEEP
angularjs
Valip
Valip

Reputation: 4610

AngularJS: How to hide menu when pressing a button

I have a button that is used to toggle a menu, but that menu should also have a button inside used to hide it.

I really hope that is an easy issue to solve because I don't have experience with AngularJS...

Here's my code:

<a href="#" class="toggle-menu" ng-model="collapsed" ng-click="collapsed=!collapsed">Click to toggle menu</a>
<div class="menu" ng-show="collapsed">
  <ol>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ol>
  <button class="hide-menu">
    Close menu
  </button>
</div>

Upvotes: 2

Views: 2259

Answers (3)

Sumanth Jois
Sumanth Jois

Reputation: 3234

To toggle the hide the menu or for toggle add this to your Menu Button.

<button class="hide-menu"   ng-click="collapsed=!collapsed">
    Close menu
  </button>

ThankYou. I hope this was HelpFul.

Upvotes: 1

vamsikrishnamannem
vamsikrishnamannem

Reputation: 4847

Yup, It's easy add click event to button ng-click="collapsed=!collapsed"

finally code is

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <a href="#" class="toggle-menu" ng-click="collapsed=!collapsed">Click to toggle menu</a>
<div class="menu" ng-show="collapsed">
  <ol>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ol>
  <button class="hide-menu" ng-click="collapsed=!collapsed">
    Close menu
  </button>
</div>
</div>

Upvotes: 4

shreyansh
shreyansh

Reputation: 1687

Just add this line

ng-click="collapsed=!collapsed"

<button class="hide-menu"  ng-click="collapsed=!collapsed">
    Close menu
  </button>

Upvotes: 1

Related Questions