How to check if a 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>

Poole

Welcome to StackOverflow! Please see "Should questions include “tags” in their titles?", where the consensus is "no, they should not". – Lowell

Ah, I didn't think about the fact that you wouldn't have access to the "typeof" keyword in your template markup. Sorry about that. I've removed my close vote. – Fda

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 a helper function in the controller!

Segal

This is not reactive. Meaning when foo changes, ng-show does not change accordingly. – Quartis

curly braces should not be used with ng-show as it expression only. Curly braces are used for evaluating an expression inside an otherwise string text – Lettered

I receive Error: [$parse:syntax] Syntax Error: Token '{' invalid key at ... – Outdare

Answer 2

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

However, to answer your question: I think the best way of doing so would be adding a helper function.

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

and in the template

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

Upright

or you can use angular's helper function, angular.isUndefined(object) / angular.isDefined(object) – Addicted

I would argue that not being able to handle an object with an undefined property is bad design front end code. – Phionna

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/

Stelmach

You're right, didn't think of it that way. Editing answer – Stelmach

This is not correct either, since undefined is not a JavaScript keyword (it's a variable). See #7174273 – Fda

It is better practice to do return (foo === undefined); than return (typeof foo === 'undefined');. – Jacindajacinta

@Stelmach Please note === operator itself check value and type as well. So you don't need to do complex code using typeof operator – Vivacious

Answer 4

Posting new answer since Angular behavior has changed. Checking equality with undefined now works in angular expressions, at least as of 1.5, as the following code works:

ng-if="foo !== undefined"

When this ng-if evaluates to true, deleting the percentages property off the appropriate scope and calling $digest removes the element from the document, as you would expect.

Oatcake

Answer 5

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

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

And vise-versa:

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

Coranto

Answer 6

If you're using Angular 1, I would recommend using Angular's built-in method:

angular.isDefined(value);

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

Bithia

Answer 7

You can use the double pipe operation to check if the value is undefined the after 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 for demo

For technical explanation for the double pipe, I prefer to take a look on this link: https://mcmap.net/q/24491/-what-does-the-construct-x-x-y-mean

Quintessa

Um, no, that's not an equivalent to check whether it is actually undefined. Your example will fail if boo variable is 0, null, false, or just an empty string. – Valene

Answer 8

As @impulsgraw wrote. You need to check for undefined after the pipes:

<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/

Eruption

Answer 9

try this angular.isUndefined(value);

https://docs.angularjs.org/api/ng/function/angular.isUndefined

Lengthways

Answer 10

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

Yamauchi