CODEWITHSUNDEEP
angularjs
jsaddwater
jsaddwater

Reputation: 1829

AngularJs: ng-show / ng-hide expression not evaluated

I'm new to both javascript and AngularJS, and wondering why is the expression inside the quotes not evaluated?

<span ng-show="{{remaining()}}!==0">sometext</span>

it is simply printed like this:

<span ng-show="2!==0">sometext</span>

and the ng-show is not working regardless of the contents. The text ( and the printed expression) is shown even if the expression is wrapped in an eval, :

eval("{{remaining()}}!==0")

I resorted to creating a function in my controller for this:

<span ng-show="renderOrNot()">sometext</span>

which works, but I would prefer not to have to write a function each time I want to make a comparison

Upvotes: 13

Views: 37727

Answers (2)

Narretz
Narretz

Reputation: 4993

Almost there ...

When you use {{}}, the values are interpolated, i.e. the markup is replaced with the result of the expression. ngShow expects only the expression, so just use the function as it is, and it will work:

<span ng-show="remaining() !== 0">sometext</span>

In general, you'll only want {{ }} when your expression / content should be displayed.

Upvotes: 35

EpokK
EpokK

Reputation: 38092

You must not use it {{}} because your value is bind. Use ng-show like this: 

<span ng-show="remaining() !== 0">sometext</span>

Upvotes: 16

Related Questions