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