javascript - Evaluation of boolean expressions in AngularJS - Stack Overflow

admin管理员组

文章数量:1291175

I'm testing the ng-show and AngularJS expressions, but I found something I can't understand. I created a variable displayed and assigned a string 'false' (not boolean) to it. The expression displayed && true is evaluated to true, and the second div is shown without problem (because a string and true should be true). I know there are some differences between Angular expressions and JavaScript expressions, however I don't know why the first div is not shown; it seems that the displayed is piled to a boolean by Angular.

Here is the jsfiddle: /

Template:

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

Controller:

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

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

I'm testing the ng-show and AngularJS expressions, but I found something I can't understand. I created a variable displayed and assigned a string 'false' (not boolean) to it. The expression displayed && true is evaluated to true, and the second div is shown without problem (because a string and true should be true). I know there are some differences between Angular expressions and JavaScript expressions, however I don't know why the first div is not shown; it seems that the displayed is piled to a boolean by Angular.

Here is the jsfiddle: http://jsfiddle/micmia/1psf70tv/3/

Template:

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

Controller:

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

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

• javascript
• angularjs

Share Improve this question Follow asked May 21, 2015 at 13:43 micmiamicmia 1,40122 gold badges1515 silver badges3232 bronze badges 9

• It can be helpful to use {{displayed}} or {{expression}} generally to debug expressions. – Eterm Commented May 21, 2015 at 13:47
• Does <div ng-show="!!displayed">test1</div> behave? – Davin Tryon Commented May 21, 2015 at 13:48
• @Davin Tryon - Yeah, I just tried that and it does work. Super bizarre. I guess the question is, why set it to "false" instead of true? Incidentally, this appears to be only with the string "false" . . . if you change it to "banana" in the fiddle, it works fine. – tandrewnichols Commented May 21, 2015 at 13:51
• if(string) will be truthy unless the string is empty. This is equivalent to what you are doing with ng-show and using "false" is simply a string – charlietfl Commented May 21, 2015 at 13:52
• @carton 'false' != false . . . Run Boolean('false') in your console, and you'll see that it should be true. – tandrewnichols Commented May 21, 2015 at 13:52

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 3

That's how angular evaluated the string 'false' and 'f' and some others as well. There was an open bug about it.

See this fiddle works with a later version.

If you are using string variable in ng-show or ng-hide means you can check the variable like expression shown below:

Template:

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

Controller:

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

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

now both div will be shown correctly

If you are using boolean variable in ng-show or ng-hide means you can check the variable like shown below:

Template:

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

Controller:

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

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

for above Boolean condition first div will not be shown and second div will be showed.

Here I have directly passed the string as a attribute value to ng-show directive and since as per javaScript typeConversion it should evaluate to true but this is not happening here with string values(result into false),although it is working fine for numeric values.

So this is a bug in evaluating boolean expressions in 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>

本文标签： javascriptEvaluation of boolean expressions in AngularJSStack Overflow