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

posted @ 2015-10-01 16:31  Darren Ji  阅读(1818)  评论(0编辑  收藏  举报

我的公众号:新语新世界,欢迎关注。