zoukankan      html  css  js  c++  java
  • 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:是否显示元素
    ● 对象一定要先声明或初始化    

  • 相关阅读:
    处理客户端无法及时更新js、css
    关于JQ判断单选复选被选中
    一路风景,一路欣赏,一路有你
    Adobe Dreamweaver CC 2015新功能
    Eclipse导出APK文件报错 android lint problem
    swift2.0 计算圆面积
    zendStudio连接远程服务器报错java.net.SocketException
    IOS tableview 消除 分割线短 15 像素 ios8方法 swift版
    应用之间调用 UIApplication类的OpenURL方法
    iOS8 今日扩展
  • 原文地址:https://www.cnblogs.com/darrenji/p/4851182.html
Copyright © 2011-2022 走看看