How to hide/show using angular ng-click?

Question

I am trying to create something like toggle so when user click on 1sideBarMenui want to displayshowMenu` and if click again it should hide it , i think below code should do it , where i am making mistake ?

main.html

<button type="button" ng-click="showSideBarMenu()" tooltip-placement="top" tooltip-popup-delay="300" uib-tooltip="Browse more" class="btn btn-success btn-circle pull-right"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button>

    <div class="sideBarMenu" ng-show="showMenu">
        <ul>
            <li>
                <button type="button" title="start recording" class="btn btn-danger  btn-xlarge" ng-click="recordLogs()" ng-disabled="disabledRecBtn"><span class="glyphicon glyphicon-record"></span></button>
            </li>
            <li>
                <button type="button" class="btn btn-primary btn-xlarge" ng-click="stopLogs()" ng-disabled="disabledStopBtn"><span class="glyphicon glyphicon-stop" title="stop recording"></span></button>
            </li>
            <li>
                <!--<button type="button" class="btn btn-success btn-md" ng-click="searchLogs()"><span class="glyphicon glyphicon-search" title="search logs in bowser"></span></button>-->
                <button type="button" class="btn btn-info  btn-xlarge" ng-click="serverFiles()"><span class="glyphicon glyphicon-folder-open" title="download server logged files"></span></button>
            </li>
        </ul>
    </div>

ctrl.js

$scope.showMenu = false;

  $scope.showSideBarMenu = function(){
    $scope.showMenu = true;
  };

I think this may help: http://stackoverflow.com/questions/19018536/how-do-i-toggle-an-ng-show-in-angularjs-based-on-a-boolean — Stephen C, Mar 24 '17 at 18:50
Simply do $scope.showMenu = !$scope.showMenu in showSidebarMenu function. — No one, Mar 24 '17 at 18:51
You have code that only ever sets the value to true and you are confused why it never becomes false? — takendarkk, Mar 24 '17 at 18:56

score 0 · Answer 1 · answered Mar 24 '17 at 18:52

$scope.toggleSideBarMenu = function() { // function name changed to be more semantic
   $scope.showMenu = !$scope.showMenu;
};

Note that you don't need to initialize scope vars to false in most cases. Angular treats undefined values and false values the same way in the view.

How to hide/show using angular ng-click?

1 Answers1