你的位置:首页 > Java教程

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