AngularJS中布尔表达式的求值

Evaluation of boolean expressions in AngularJS

本文关键字：布尔表达式 AngularJS      更新时间：2023-09-26

我正在测试ng-show和AngularJS表达式，但我发现了一些我无法理解的东西。我创建了一个变量displayed，并分配了一个字符串'false'(不是布尔)给它。表达式displayed && true被求值为true，并且显示第二个div没有问题(因为字符串和true都应该为真)。我知道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';
});

这就是angular如何计算字符串'false'和'f'以及其他一些字符串的。有一个公开的bug。

如果您在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将显示。

在这里，我直接将字符串作为属性值传递给ng-show指令，因为根据javaScript的typeConversion，它应该评估为true，但这并没有发生在这里，字符串值(结果为false)，尽管它对数值很好。

所以这是在angularJs中计算布尔表达式的一个错误。

My Code: 

 <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>
相关文章：