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：是否显示元素
● 对象一定要先声明或初始化

相关阅读:
.Net 框架培训
根据 XSD生成 Data Contract之怪现象
WCF performance
IIS7 performance
【原】[SQL function] SQL Server Split Function
【原】[Data.Common.Format] 格式化传入的float（浮点型）字符串
【原】[Crystal Reports] 当前一条记录与前一条记录比较
【转】C#中处理XML文档的方法
【原】Crystal Reports水晶报表格式化传入的float字符串
【转】[ASP] 用 ASP 创建 GUID

原文地址：https://www.cnblogs.com/darrenji/p/4851182.html