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

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


											
AngularJS一个由于未声明对象而报的错的更多相关文章
	

    
								
  1. C# 一个数组未赋值引发的错误
		
    在电脑前又是一天,后来脑子也糊里糊涂,可能是基础还不牢固,设置断点,找了找问题才发现数组定义出了问题, 我是这样定义数组的,string[] auths ; string auths=new stri ...
    
		
    2. 
						
  2. 修改SQL数据库中表字段类型时，报“一个或多个对象访问此列”错误的解决方法
		
    在SQL数据库中使用SQL语句(格式:alter table [tablename] alter column [colname] [newDataType])修改某表的字段类型时,报一下错误:由于一 ...
    
		
    3. 
						
  3. JavaScript 函数——语法，调用，返回值，局部变量，全局变量，未声明变量
		
    JavaScript 函数是被设计为执行特定任务的代码块. JavaScript 函数会在某代码调用它时被执行. ㈠函数 ⑴什么是函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. ⑵ ...
    
		
    4. 
						
  4. error C2065: “IDD_DIALOG1” : 未声明的标识符
		
    编译时提示error C2065: “IDD_DIALOG1” : 未声明的标识符 错误的可能原因及解决方法如下: 1.出错文件中没有包含资源文件ID声明的resource.h文件.在出错文件中加入# ...
    
		
    5. 
						
  5. 利用try-catch判断变量是已声明未赋值还是未声明
		
    目的是如果一个变量是已声明未赋值,就可以直接赋值,并且不能改变变量的作用域: 如果未声明的话,就重新声明, 在网上搜了下,常见的方法是if(typeof(a)=='undefined'){var a= ...
    
		
    6. 
						
  6. 利用try-catch判断变量是已声明未声明还是未赋值
		
    原文 利用try-catch判断变量是已声明未声明还是未赋值 这篇文章主要介绍了利用try-catch判断变量是已声明未赋值还是未声明,需要的朋友可以参考下 目的是如果一个变量是已声明未赋值,就可以直 ...
    
		
    7. 
						
  7. javascript中的未定义和未声明
		
    我们在项目中,经常会定义一些变量(很多时候,定义过多的全局变量),当我们调用这些变量的时候,就会发生各种各样的突发状况. 看一个示例: var a; typeof a; typeof b; 很简单的一 ...
    
		
    8. 
						
  8. MFC 错误异常，用vs添加资源并为资源定义类后报错：error C2065 : 未声明的标识符
		
    添加了一个Dialog资源,修改了ID之后右击资源添加了一个类,在类里面有一个成员变量: // 对话框数据    enum { IDD = IDD_GETIN }; 而在编译过程中出现报错,错误代号是 ...
    
		
    9. 
						
  9. 引用其他头文件时出现这种错误，莫名其妙，error C2065: “ColorMatrix”: 未声明的标识符
		
    今天做项目时,直接拷贝了另一个工程里的头文件和源文件,然后运行时就出现这种问题,莫名其妙,在原程序里运行一点问题就没有,但是在新工程里就是error. >e:\c++\button_fly2\b ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python3光学字符识别模块tesserocr与pytesseract
			
    OCR,即Optical Character Recognition,光学字符识别,是指通过扫描字符,然后通过其形状将其翻译成电子文本的过程,对应图形验证码来说,它们都是一些不规则的字符,这些字符是由 ...
    
			
    2. 
						
  2. centos下配置nginx支持php
			
    添加nginx 默认主页index.php vim .../etc/nginx/conf.d/default.conf location / { root   /usr/share/nginx/htm ...
    
			
    3. 
						
  3. SpringBoot修改默认端口号,session超时时间
			
    有时候我们可能需要启动不止一个SpringBoot,而SpringBoot默认的端口号是8080,所以这时候我们就需要修改SpringBoot的默认端口了.修改SpringBoot的默认端口有两种方式 ...
    
			
    4. 
						
  4. day22-23作业
			
    1.字节流  字符流    2.read()  3.-1  4.System.out  5.InputStream  6.OutputStream 1.IO流按流向分为输入流和输出流,即输入流和输出流 ...
    
			
    5. 
						
  5. io多路复用的精髓
			
    前言 当我们要编写一个echo服务器程序的时候,需要对用户从标准输入键入的交互命令做出响应.在这种情况下,服务器必须响应两个相互独立的I/O事件:1)网络客户端发起网络连接请求,2)用户在键盘上键入命 ...
    
			
    6. 
						
  6. MySQL ACID及四种隔离级别的解释
			
    以下内容出自<高性能MySQL>第三版,了解事务的ACID及四种隔离级有助于我们更好的理解事务运作. 下面举一个银行应用是解释事务必要性的一个经典例子.假如一个银行的数据库有两张表:支票表 ...
    
			
    7. 
						
  7. hadoop2.5搭建过程
			
    1 搭建环境所使用的资源 VMware Workstation 9 ubuntu-14.04.2-desktop-amd64.iso jdk-7u80-linux-x64.tar.gz hadoop- ...
    
			
    8. 
						
  8. 德卡Z90读卡器读取社保卡，德卡Z90读卡器CSharp示例程序源码
			
    前言,最近学习调用 医保卡业务,使用德卡读卡器,主要就是调用一个DLL,动态库文件. 借着自学的机会把心得体会都记录下来,方便感兴趣的小伙伴学习与讨论. 内容均系原创,欢迎大家转载分享,但转载的同时别 ...
    
			
    9. 
						
  9. 记2013年度成都MVP社区巡讲
			
    上个周六在天府软件园A区的翼起来咖啡举行了MVP社区巡讲成都站的活动,这个巡讲活动去年也搞过一次. MVP社区巡讲是 @微软中国MVP项目组 支持的,由各地的MVP担任讲师,给本地技术社区提供的一种社 ...
    
			
    10. 
						
  10. 详解VirtualBox虚拟机网络环境解析和搭建-NAT、桥接、Host-Only、Internal、端口映射
			
    本文以VirtualBox为例 如果出现主机无法ping通虚拟机的情况,请首先确认虚拟机防火墙已关闭. 一.NAT模式 特点: 1.如果主机可以上网,虚拟机可以上网 2.虚拟机之间不能ping通 3. ...
    
			
    11.