AngularJS一个由于未声明对象而报的错
2015-10-01 16:31
656 查看
实现这样的一个需求:点击某个按钮,然后显示或隐藏某块区域。先注册一个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双向绑定,手动实施观察
- AngularJS 相关问题学习 借鉴
- AngularJS的Hello World
- angularJS directive中的controller和link function辨析
- angular实用手册
- 自定义angularjs分页控件
- angularjs指令
- angular之显示注入声明
- angular之$compile
- angular中的异常机制与异常之外的处理
- angularjs 未整理--笔记--简单使用和简介
- angular-translate
- 学习笔记-AngularJs(八)
- AngularJS 官方案例:angular-phonecat
- angular之modal实现
- angular之$provide
- angular之$injector
- 前端见微知著AngularJS备忘篇:温故而知新,可以为师矣
- [RxJS + AngularJS] Sync Requests with RxJS and Angular
- AngularJS之延迟加载html template