ng-show if json returns [false] with angularjs

Question

I'm new to angulars and i working on a project where i want a div to only show when the json data returns [false]. i sometimes get the json to return [false] when there is no results from the query.

JS

 .controller('query_ctrl', function($scope, $http){ $http.get('http://localhost/db/templates/search/matches.php').success(function(data){
            console.log(JSON.stringify(data));
            $scope.matches=data;
           });
})

HTML

<div ng-controller="query_ctrl">
<div align="center" ng-show ="$scope.matches='false'">json returned false 
 </div>

<div align="center" ng-show ="$scope.matches!='false'">json returned true 
 </div>
</div>

why you are using a string false if its a boolean value just leave as ng-show = "matches" no need of $scope in HTML — Vinod Louis
– Vinod Louis, Commented Nov 16, 2016 at 12:18
Even if you have googled it, you will surely get better code to implement it. — Jigar7521
– Jigar7521, Commented Nov 16, 2016 at 12:28

Lee Brindley · Accepted Answer · 2016-11-16 12:35:37Z

3

You don't need to reference $scope in the HTML.

<div ng-controller="query_ctrl">
<div align="center" ng-show ="matches=='false'">json returned false 
 </div>

<div align="center" ng-show ="matches!='false'">json returned true 
 </div>
</div>

Also, as the comment above says - i'm unsure why you're comparing the value to the string 'false', I assume you want to compare to boolean false. See below.

<div ng-controller="query_ctrl">
<div align="center" ng-show="matches==false">json returned false 
 </div>

<div align="center" ng-show ="matches!=false">json returned true 
 </div>
</div>

You could make the ng-show expressions more concise by just having matches as the expression, ng-show will evaluate if it is a truthy value or not, see below.

<div ng-controller="query_ctrl">
    <!-- Will show if matches is a false value -->
    <div align="center" ng-show="!matches">json returned false 
     </div>

    <!-- Will show if matches is a truthy value -->
    <div align="center" ng-show ="matches">json returned true 
     </div>
    </div>

edited Nov 16, 2016 at 12:35

answered Nov 16, 2016 at 12:20

Lee Brindley

6,5326 gold badges44 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mackan Over a year ago

ng-show="matches" and ng-show="!matches" mayhaps

Lee Brindley Over a year ago

@Mackan That is how I would write it, didn't want to alter his code too much.. I will add in a third snippet :)

Oren Haliva · Accepted Answer · 2016-11-16 12:22:29Z

1

you are missing one = in the first ng-show and also you don't need to refence the $scope, should be:

ng-show ="matches=='false'"

answered Nov 16, 2016 at 12:22

Oren Haliva

3513 silver badges15 bronze badges

Comments

Akhil · Accepted Answer · 2016-11-16 12:22:39Z

1

Everything seems fine except $scope is not used in html file.

<div ng-controller="query_ctrl">
<div align="center" ng-show ="matches=='false'">json returned    false 
</div>

 <div align="center" ng-show ="matches!='false'">json returned true 
 </div>
 </div>

replace $scope.matches with matches only.

"ng-show" or "ng-if" both could be used for this.

answered Nov 16, 2016 at 12:22

Akhil

9510 bronze badges

Comments

Jigar7521 · Accepted Answer · 2016-11-16 12:27:28Z

1

You don't need to define comparison operation near ng-show, you can even just do like :

<div align="center" ng-show ="$scope.matches"> // Boolean

answered Nov 16, 2016 at 12:27

Jigar7521

1,5791 gold badge14 silver badges29 bronze badges

Comments

Bikash Chapagain · Accepted Answer · 2016-11-16 12:35:57Z

0

.controller('query_ctrl', function($scope, $http){ $http.get('http://localhost/db/templates/search/matches.php').success(function(data){
        console.log(JSON.stringify(data));
        $scope.matches="data here";
       }).error(function(error){
         console.log("Error here");
         $scope.matches="Error here"};
})

Then on the HTML file you can write:

<div ng-controller="query_ctrl">
<div align="center" ng-show ="matches=='data here'">json returned true 
</div>

<div align="center" ng-show ="matches=='Error here'">json returned false 
</div>
</div>

All you had to do was loose that $scope in the html this is because HTML page is considered as the scope.

answered Nov 16, 2016 at 12:35

Bikash Chapagain

3002 silver badges10 bronze badges

Collectives™ on Stack Overflow

ng-show if json returns [false] with angularjs

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related