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

时间:2017-03-24 18:49:28

标签: javascript angularjs

我正在尝试创建类似切换的内容,以便当用户点击1sideBarMenu i want to display showMenu`时再次点击它应该隐藏它,我认为下面代码应该这样做,我在哪里犯错?

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;
  };

1 个答案:

答案 0 :(得分:0)

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

请注意,在大多数情况下,您无需将范围变量初始化为false。 Angular在视图中以相同的方式处理未定义的值和错误值。