Question

我正在测试ng-show和AngularJS表达式，但我找到了一些我无法理解的东西。我创建了一个变量displayed并为其分配了一个字符串'false'（不是布尔值）。表达式displayed && true被计算为true，第二个div显示没有问题（因为字符串和true应该为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';
});

Answer 1

这就是角度如何评估字符串'false'和'f'以及其他一些角色。关于它有一个开放的CSS Selector Reference。

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

Answer 2

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

Answer 3

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

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

我的代码：

dotnet restore

评估AngularJS中的布尔表达式

3 个答案: