Why does {{ isNan(x) }} not work in angularJS?

Question

Note the title of this question has changed to one that's more focused to the exact problem. See the comment stream to follow how it came about that I realized the problem is that AngularJS does not seem to handle {{ isNaN() }}

I have the following in my HTML:

xx {{ option.selectedSubject }} yy {{ (option.selectedSubject == null) }} zz

and I also tried:

xx {{ option.selectedSubject }} yy {{ option.selectedSubject == null }} z

and:

xx {{ option.selectedSubject }} yy {{ option.selectedSubject === null }} zz

Can someone help explain to me why I get the following for each of the above when I view my page:

xx null yy false zz

Update 1 I tried the following:

aa {{ option.selectedSubject === "null" }} bb {{ option.selectedSubject == "null" }} cc

and it gives this:

aa false bb false cc

Update 2 I am not sure if this helps but here's what populates the values of option.selectedSubject. In this case there's nothing in local storage:

$scope.option.selectedSubject = parseInt(localStorage.get('selectedSubject'));

When I check the value of $scope.option.selectedSubject it is NaN

Answer 1

The problem here is not isNaN. The problem is that you are calling a function on the $scope variable that does not exist.

Every interpolated piece of text ( '{{ text }}' ), is associated to a $scope variable and evaluated against that $scope variable.

To make things easy for you, $scope.property can be created on the fly if it doesn't exist. Anytime you use ngModel='someProperty' or {{ aPropertyName }}, then the corressponding $scope.someProperty or $scope.aPropertyName is created for you automatically if it didn't already exist. This shortcut only works with primitives, however.

Function calls are always evaluated against $scope, and never created. This is why you have to say $scope.isNaN = isNaN, as you found in your earlier comment.

Try it with any function. isArray, isNumber, etc. It won't work unless you have put a $scope.functionName = functionName in a controller somewhere.

Edit: Also, if you REALLY want to do the isNaN test right in the interpolation, you can take advantage of javascript's type system and use

{{ property != property }}

But this is bad form...

http://plnkr.co/edit/wfLqzk8QxScsJPF5qY12?p=preview

Answer 2

Edit : The original question was Can I have a test inside {{ }} in angularJS?, and $scope.option.selectedSubject was meant to be null and not NaN. The author should have open another question instead of changing it to a complete different one.

---

Answer to the original question :

You can put an expression inside your binding, hence you can test {{ option.selectedSubject == null }}. Check your scope if the result of the evaluation is not what you are expecting.