AngularJS 中布尔表达式的求值答案

【问题标题】：Evaluation of boolean expressions in AngularJSAngularJS 中布尔表达式的求值
【发布时间】：2015-08-03 05:28:18
【问题描述】：

我正在测试 ng-show 和 AngularJS 表达式，但我发现了一些我无法理解的东西。我创建了一个变量displayed 并为其分配了一个字符串'false'（不是布尔值）。表达式displayed && true 被评估为真，第二个 div 显示没有问题（因为字符串和真应该为真）。我知道 Angular 表达式和 JavaScript 表达式之间存在一些差异，但是我不知道为什么第一个 div 没有显示；似乎 displayed 被 Angular 编译为布尔值。

这里是 jsfiddle：http://jsfiddle.net/micmia/1psf70tv/3/

模板：

<div ng-controller="MyCtrl">
    <div ng-show="displayed">test1</div>
    <div ng-show="displayed && true">test2</div>
</div>

控制器：

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function ($scope, $parse) {
    $scope.displayed = 'false';
});

【问题讨论】：

通常使用 {{displayed}} 或 {{expression}} 来调试表达式会很有帮助。
<div ng-show="!!displayed">test1</div> 行为正常吗？
@Davin Tryon - 是的，我刚刚尝试过，它确实有效。超级诡异。我想问题是，为什么将其设置为"false" 而不是true？顺便说一句，这似乎只适用于字符串 "false" 。 . .如果您在小提琴中将其更改为“香蕉”，它就可以正常工作。
if(string) 将是真实的，除非字符串为空。这相当于您使用 ng-show 所做的事情，而使用 "false" 只是一个字符串
@carton 'false' != false 。 . .在你的控制台中运行Boolean('false')，你会发现它应该是真的。

标签： javascript angularjs

【解决方案1】：

如果您在 ng-show 或 ng-hide 中使用字符串变量，则意味着您可以检查变量，如下所示：

模板：

<div ng-controller="MyCtrl">
    <div ng-show="displayed != null">test1</div>  
    <div ng-show="displayed == 'false'">test2</div>
</div>

控制器：

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function ($scope, $parse) {
    $scope.displayed = 'false';
});

现在两个 div 都会正确显示

如果您在 ng-show 或 ng-hide 中使用布尔变量，则意味着您可以检查变量，如下所示：

模板：

<div ng-controller="MyCtrl">
    <div ng-show="displayed">test1</div>  
    <div ng-show="!displayed">test2</div>
</div>

控制器：

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function ($scope, $parse) {
    $scope.displayed = false;
});

对于上述布尔条件，第一个 div 将不显示，第二个 div 将显示。

【讨论】：

【解决方案2】：

这就是 Angular 评估字符串 'false' 和 'f' 以及其他一些字符串的方式。有一个关于它的公开bug。

请参阅此fiddle 适用于更高版本。

【讨论】：

【解决方案3】：

在这里，我直接将字符串作为属性值传递给 ng-show 指令，因为根据 javaScript typeConversion 它应该评估为 true，但这里没有发生字符串值（结果为 false），尽管它工作正常用于数值。

所以这是在 angularJs 中评估布尔表达式的错误。

我的代码：

 <div ng-controller="myController">
    <input type="text" ng-model="name">
    <p>{{name}}</p>
    <p>{{10+10}}</p>
    <button type="button" ng-click="myFunction(this)">click Me !!</button>

    <p ng-show="rabbit">The name is {{ name | uppercase }}</p>

  </div>

【讨论】：