How to check if scope variable is undefined in AngularJS template?

Question

How to check if a scope variable is undefined?

This does not work:

<p ng-show="foo == undefined">Show this if $scope.foo == undefined</p> 

Answer 1

Here is the cleanest way to do this:

 <p ng-show="{{foo === undefined}}">Show this if $scope.foo === undefined</p> 

No need to create an auxiliary function in the controller!

Answer 2

Using undefined to make decisions is usually a sign of poor design in Javascript. You might consider doing something else.

However, to answer your question: I think the best way to do this is to add a helper function.

 $scope.isUndefined = function (thing) { return (typeof thing === "undefined"); } 

and in the template

 <div ng-show="isUndefined(foo)"></div> 

Answer 3

Corrected:

HTML

  <p ng-show="getFooUndef(foo)">Show this if $scope.foo === undefined</p> 

Js

 $scope.foo = undefined; $scope.getFooUndef = function(foo){ return ( typeof foo === 'undefined' ); } 

Fiddle: http://jsfiddle.net/oakley349/vtcff0w5/1/

Answer 4

If foo not a boolean variable then this will work (i.e. you want to show this when this variable has some data):

<p ng-show="!foo">Show this if $scope.foo is undefined</p>

And vice versa:

<p ng-show="foo">Show this if $scope.foo is defined</p>

Answer 5

Submitting a new response since the behavior of Angular has changed. Equality checking with undefined now works in Angular expressions with at least 1.5, as the following code works:

 ng-if="foo !== undefined" 

If ng-if is true, removing the percentages property from the corresponding area and calling $ digest removes the item from the document, as you would expect.

Answer 6

If you are using Angular 1, I would recommend using the built-in Angular method:

angular.isDefined (value);

link: https://docs.angularjs.org/api/ng/function/angular.isDefined

Answer 7

You can use the double pipe operation to check if a value is undefined after the statement:

 <div ng-show="foo || false"> Show this if foo is defined! </div> <div ng-show="boo || true"> Show this if boo is undefined! </div> 

Check JSFiddle on demo

For a technical explanation of the double pipe, I prefer to take a look at this link: https://stackoverflow.com/a/4646/

Answer 8

As @impulsgraw wrote. You need to check the uncertainty after the channels:

 <div ng-show="foo || undefined"> Show this if foo is defined! </div> <div ng-show="boo || !undefined"> Show this if boo is undefined! </div> 

https://jsfiddle.net/mjfz2q9h/11/

Answer 9

<p ng-show="angular.isUndefined(foo)">Show this if $scope.foo === undefined</p>