ng-show does not evaluate expression

Question

I am new to Angularjs and practicing it by doing some tasks. Here I am creating an object in controller and the object values in my web page. But here the ng-show does not evaluate the below expression. But if I create a variable in controller as $scope.ngshow = false; it will work. Please help me why the below code did not worked.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<ul>

<li ng-show = "a.name"> Name {{a.name}} </li>
<li ng-show = "a.id"> Id  {{a.id}}</li>
<li ng-show = "a.address"> Address  {{a.address}}</li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.a = {
    'name' : 'false',
    'id' : 'true',
    'address' : 'false'
    };
});
</script>

<p>ng-show didnt accept expressions.</p>

</body>
</html>

Thanks for your valuable time.

don't use true or false as a string, remove quote. – Phantom Apr 12 '17 at 10:42 — Phantom, Apr 12 '17 at 10:42

score 1 · Accepted Answer · answered Apr 12 '17 at 10:40

You should not use true or false as string

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.a = {
    'name' : false,
    'id' : true,
    'address' : false
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
<ul>

<li ng-show = "a.name"> Name {{a.name}} </li>
<li ng-show = "a.id"> Id  {{a.id}}</li>
<li ng-show = "a.address"> Address  {{a.address}}</li>
</ul>
</div>

<script>

</script>

<p>ng-show didnt accept expressions.</p>

Nikhil Mohanan · Answer 2 · 2017-04-12T10:51:10.553

Just remove the single quotes from true and false.If you put quotes on true and false , they are strings.In that case ng-show is checking whether variable is defined or not.In your case, since it have string true/false value, ng-show is considering expression as defined hence true.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <ul>

      <li ng-show="a.name"> Name {{a.name}} </li>
      <li ng-show="a.id"> Id {{a.id}}</li>
      <li ng-show="a.address"> Address {{a.address}}</li>
    </ul>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.a = {
        'name': false,
        'id': true,
        'address': false
      };
    });
  </script>

  <p>ng-show didnt accept expressions.</p>

</body>

</html>

score 0 · Answer 3 · answered Apr 12 '17 at 10:44

well, apperenly it's a version conflict. This version 1.4.8 of angular ng show support value as boolean not string boolean. So you need to remove the quotes around the values

$scope.a = {
        'name' : false,
        'id' : true,
        'address' : false
        };

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.a = {
    'name' : false,
    'id' : true,
    'address' : false
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
<ul>

<li ng-show = "a.name"> Name {{a.name}} </li>
<li ng-show = "a.id"> Id  {{a.id}}</li>
<li ng-show = "a.address"> Address  {{a.address}}</li>
</ul>
</div>

But if you are using a lower version like 1.2.23 then angular identify string values as boolean if the values are true or false

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.a = {
    'name' : 'false',
    'id' : 'true',
    'address' : 'false'
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>

<li ng-show = "a.name"> Name {{a.name}} </li>
<li ng-show = "a.id"> Id  {{a.id}}</li>
<li ng-show = "a.address"> Address  {{a.address}}</li>
</ul>
</div>

ng-show does not evaluate expression

3 Answers3