如何使用角度ng-click隐藏/显示？

Question

I am trying to create something like toggle so when user click on 1sideBarMenu i want to display showMenu` 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;
  };

Answer 1

$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.