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

  • 相关阅读:
    spark 读取mongodb失败,报executor time out 和GC overhead limit exceeded 异常
    在zepplin 使用spark sql 查询mongodb的数据
    Unable to query from Mongodb from Zeppelin using spark
    spark 与zepplin 版本兼容
    kafka 新旧消费者的区别
    kafka 新生产者发送消息流程
    spark ui acl 不生效的问题分析
    python中if __name__ == '__main__': 的解析
    深入C++的new
    NSSplitView
  • 原文地址:https://www.cnblogs.com/darrenji/p/4851182.html
Copyright © 2011-2022 走看看