Question

这是一个小例子

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello World, AngularJS</title>
    <script type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

</head>
<body>

    Write some text in textbox:
    <input type="text" ng-model="sometext" />

    <h1 ng-show="sometext">Hello {{ sometext }}</h1>

</body>
</html>

程序运行时，<h1>标记未显示，因为 sometext 会向 ng-show 返回false。

为什么 sometext 会返回false？因为某些文字是空的还是未分配的？

Answer 1

ngShow指令根据提供给ngShow属性的表达式显示或隐藏给定的HTML元素。通过将.ng-hide CSS类移除或添加到元素上来显示或隐藏元素。 .ng-hide CSS类在AngularJS中预定义，并将显示样式设置为none（使用！important标志）。

在ngShow表达式求值为truthy值之后，就在内容设置为visible .ng-hide之前，类被删除，如果表达式求值为非真值，即0，false或null，则.ng-hide类已添加。

Answer 2

运行代码，您可以看到它正常运行。我添加了一个带有sometext实际值的h2元素，你可以看到它是一个空字符串，在JavaScript中的计算结果为false。

＆＃13;

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello World, AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</head>
<body>

    Write some text in textbox:
    <input type="text" ng-model="sometext" />

    <h1 ng-show="sometext">Hello {{sometext}}</h1>
    <h2>Actual String {{sometext}}</h2>

</body>
</html>

＆＃13;

Angular：ng-show的工作原理

2 个答案: