Question

我是Angular JS的新手，我对此代码感到困惑，在阅读教程时，我在Angular JS上遇到了这段代码。请帮助我。

更具体地说，＆＃39; AfterClicked＆＃39;正在努力控制DIV元素的可见性。

HTML代码：

<!DOCTYPE html>
<html ng-app="myModel">
<head>
    <title>Begin with Angular</title>
    <meta charset="utf-8" />
    <!-- Adding the Bootstrap style sheet-->
    <link href="Styles/bootstrap.min.css" rel="stylesheet" />


    <!-- Adding the Angular File-->
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/MainM.js"></script>
</head>
<body>
    <div ng-controller="myController as control">

        <div ng-hide="AfterClicked">
            {{control.title}}

            <a href="#" ng-click="AfterClicked=!AfterClicked">click To Edit</a>
        </div>

        <div ng-show="AfterClicked">
            <input ng-model="control.title">

            <a href="#" ng-click="AfterClicked=!AfterClicked">Done Editing??</a>
        </div>
    </div>

</body>
</html>

JS代码：

/// <reference path="angular.js" />
var myApp = angular.module("myModel", [])
                .controller("myController", function () {
                    this.title = "Welcome to Angular",
                    this.AfterClick=0
                });

它工作正常，我坚持的事情是＆＃34; AfterClicked＆＃34;，它如何在ng-show，ng-hide和ng-click in anchor tags中工作

请帮帮我.. !!

Answer 1

更新回答：

当您未在AngularJS控制器代码中定义对象但在模板中使用它时，Angular会创建该对象并为其分配空字符串值。因此，在这种情况下，即使您没有在JS代码中为AfterClicked分配任何值，它也是由Angular创建的并设置为``。计算结果为false，隐藏div。您可以检查此小提琴中的值：http://jsfiddle.net/5DMjt/12053/

首先，代码中有几处错误。

1. JS代码中有AfterClicked的拼写错误。

2.由于您使用的是myController as control语法，因此点击锚标记时，应使用control.AfterClicked而不是AfterClicked。

现在在JS代码中，AfterClicked被设置为0，在JS中评估为false。

在ng-hide="AfterClicked"代码中，AfterClicked的计算结果为false，因此angular隐藏了div。

在锚标记代码ng-click="AfterClicked=!AfterClicked"中，表示在点击锚标记时，会计算表达式"AfterClicked=!AfterClicked"，这会否定AfterClicked。

在ng-show和ng-hide中应用条件

1 个答案: