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

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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.

Method 2

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

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply