实现这样的一个需求:点击某个按钮,然后显示或隐藏某块区域。 先注册一个AngularJS的一个module: var myApp = angular.module("myApp",[]); 为module注册controller: myA ...
实现这样的一个需求:点击某个按钮,然后显示或隐藏某块区域。
先注册一个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='/images/loading.gif' data-original="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一个由于未声明对象而报的错
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。