Question

我正在使用AngularJS跟踪教程，但无法创建切换效果。

我的控制台读取此错误：TypeError：无法设置未定义的属性“show” 在新的（http://practice.dev/app.js:41:25）指向这行代码：$scope.menuState.show = false;

app.js

  app.controller('DeathrayMenuController',['$scope', function ($scope){
            $scope.menuState.show =  false;
            console.log($scope.menuState.show)

            $scope.toggleMenu=function(){
                $scope.menuState.show = !$scope.menuState.show;
            };

            $scope.stun=function(){
                console.log('stunned')
            };
            $scope.disintegrate=function(){
                console.log('disintegrated')
            };
            $scope.disintegrate=function(){
                console.log('Erased')
            };
        }]);

的index.html

<div ng-controller='DeathrayMenuController'>
            <button ng-click='toggleMenu()'>Toggle Menu</button>
            <ul ng-show='menuState.show'>
                <li><button ng-click='stun()'>Stun</button></li>
                <li><button ng-click='disintegrate()'>Disintegrate</button></li>
                <li> <button ng-click='erase()'>Erase from history</li>
            </ul>
        </div>

Answer 1

正如PSL所说，$scope.menuState未定义。

在向对象添加属性之前，必须创建对象。

将第二行更改为：

$scope.menuState = { show: false };

Answer 2

要使用AngularJS在Html元素中创建切换效果，我们将使用AngularJS的ngHide指令。

AngularJS ngHide指令用于根据提供给ngHide属性的表达式显示或隐藏给定的HTML元素。

示例

<强> HTML

<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script> </head> <body> <div ng-app="toggleApp" ng-controller="toggleController"> <input type="button" value="Toggle Div" ng-click="ShowHide()" /> <br> <br> <div ng-hide="IsHidden">My DIV</div> </div> </body> </html>

<强>的JavaScript

var app = angular.module('toggleApp', []) app.controller('toggleController', function ($scope) { //hide the DIV by default. $scope.IsHidden = true; $scope.ShowHide = function () { //If DIV is hidden it will be visible and vice versa. $scope.IsHidden = $scope.IsHidden ? false : true; } });

我从http://www.tutsway.com/create-toggle-effect-in-html-elements-using-angular-js.php
获取了参考资料

无法创建切换效果 - Angularjs

2 个答案: