Issue with ngShow

Question

I have following problem with ngShow. I receive response as a jSON from $http.get and construct several DOM elements using ngRepeat. All this working properly. From my controller a just apply:

    $http.get(requestUrl).success(function (data) {
        $scope.results = data.results;
    });

data.results is a object like this:

{ 
   "someProp": ["item1", "item2", "item3"],
   "someProp1": ["item1", "item2", "item3"]
}

From my template I try to use ngShow like this:

<table ng-show="Object.keys(results).length > 0">

and like this:

<table ng-show="Object.keys($scope.results).length > 0">

With no luck.

<table ng-show="true">

and

<table ng-show="false">

working properly.

So it seems that the problem is in the expression. I would be very grateful for any help.

`ng-show` expects an [angular expression](http://docs.angularjs.org/guide/expression), so without doublechecking you can't assume that every *normal* javascript function will just work. — Yoshi, Aug 28 '13 at 14:10

score 8 · Accepted Answer · answered Aug 28 '13 at 14:10

8

It does not evaluate the Object.keys function inside of the expression as it is not actually located on the scope. One way you can get around this is by assigning the Object to the scope.

$scope.Object = Object;

and inside your view

<div ng-show="Object.keys(results).length > 0">
    {{Object.keys(results).length}}
</div>

answered Aug 28 '13 at 14:10

Mark Coleman

40,542
9
81
101

1

Thank you! I've been scratching my head for a while why this didn't work. – Arthur Frankel Feb 09 '14 at 01:53
where do you set $scope.Object = Object; I got error?? http://stackoverflow.com/questions/27311331/how-to-get-the-length-of-a-map-in-angularjs-ng-show – Jaxox Dec 05 '14 at 08:32

score 2 · Answer 2 · answered Aug 28 '13 at 14:06

2

Ng Show needs an instruction, you have to surround it with simple quotes

<table ng-show="'Object.keys(results).length > 0'">

answered Aug 28 '13 at 14:06

Nox

236
1
9

Can't find it anywhere in the docs. However, it works indeed. – fracz Feb 03 '15 at 09:24

score 0 · Answer 3 · answered Aug 28 '13 at 14:13

You are storing data.results to $scope.results. Hence your scope variable will not have results. If you want to check for results, then use the following.

$http.get(requestUrl).success(function (data) {
        $scope.backEndJson = data;
});

Hence your HTML should have,

<table ng-show="backEndJson(results).length > 0">

BTW, we are not supposed to use $scope on the HTML side as $scope as all operations on the HTML side is assumed to be on the scope variable.

Process of substituting all angular expressions with scope variables is called interpolation — Abilash, Aug 28 '13 at 14:15

score 0 · Answer 4 · answered Aug 08 '19 at 10:57

0

Try this:

<table ng-hide="angular.equals({}, results)">

answered Aug 08 '19 at 10:57

David García López

1
2

Issue with ngShow

4 Answers4

Linked