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

Question

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

Answer 1

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.

Answer 2

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

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