AngularJS一个由于未声明对象而报的错

实现这样的一个需求：点击某个按钮，然后显示或隐藏某块区域。

先注册一个AngularJS的一个module:

var myApp = angular.module("myApp",[]);

为module注册controller：

myApp.controller("MyController",['$scope',function($scope){
    
    $scope.menuState.show = false;
    
    $scope.toggleMenu = function(){
        $scope.menuState.show = !$scope.menuState.show;
    };
}]);

以上，toggleMenu函数用来修改show字段的true或false,即toggle。

AugularJS为我们提供了一个ng-show,当为true就显示，反之不显示。

<div ng-controller="MyController">
    <button ng-click="toggleMenu()">Toggle Menu</button>
    <ul ng-show="menuState.show">
        <li>aa</li>
        <li>bb</li>
    </ul>
</div>

运行，报错: TypeError: Cannot set property 'show' of undefined

原来，show作为menuState的一个字段，而menuState作为对象还没有声明。加上声明menuState对象的代码：

        myApp.controller("MyController",['$scope',function($scope){
            
            $scope.menuState={};
            
            $scope.menuState.show = false;
            
            $scope.toggleMenu = function(){
                $scope.menuState.show = !$scope.menuState.show;
            };
        }]);

完整如下：

<!doctype html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <script src="angular.min.js"></script>
    <script>
        var myApp = angular.module("myApp",[]);
        
        myApp.controller("MyController",['$scope',function($scope){
            
            $scope.menuState={};
            
            $scope.menuState.show = false;
            
            $scope.toggleMenu = function(){
                $scope.menuState.show = !$scope.menuState.show;
            };
        }]);
    </script>
</head>
<body>
    <div ng-controller="MyController">
        <button ng-click="toggleMenu()">Toggle Menu</button>
        <ul ng-show="menuState.show">
            <li>aa</li>
            <li>bb</li>
        </ul>
    </div>
</body>
</html>

总结：

● ng-show：是否显示元素
● 对象一定要先声明或初始化