angularJs ng-show命令隐藏

最新推荐文章于 2018-05-25 15:27:31 发布

转载最新推荐文章于 2018-05-25 15:27:31 发布 · 2.7k 阅读

本文介绍了一个使用AngularJS实现的简单菜单切换效果。通过定义控制器`DeathrayMenuController`来控制菜单的显示与隐藏状态，并利用`ng-show`指令和按钮点击事件`ng-click`实现交互。该示例展示了如何利用AngularJS的基本特性完成网页元素的动态显示与隐藏。

<html ng-app>

    <body>

        <div ng-controller="DeathrayMenuController">

            <button ng-click='toggleMenu()'>isShow</button>   

            <ul ng-show="menuState.show">

                <li >zero</li>   

                <li >one</li>

                <li >two</li>       

            </ul>   

        </div>                   

        <script src="angular.js"></script>

        <script>

            function DeathrayMenuController($scope){

$scope.menuState={};
                    //把变量绑定上作用域

                $scope.menuState.show=false;

                $scope.toggleMenu=function(){

                    $scope.menuState.show=!$scope.menuState.show;

                }

            };

        </script>

    </body>

</html>