60

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>
Sebastian Barth
  • 4,079
  • 7
  • 40
  • 59
  • Welcome to StackOverflow! Please see ["Should questions include “tags” in their titles?"](http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), where the consensus is "no, they should not". –  Nov 20 '14 at 15:06
  • 3
    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. – Josh Darnell Nov 20 '14 at 15:08

10 Answers10

69

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!

jlewkovich
  • 2,725
  • 2
  • 35
  • 49
  • 9
    This is not reactive. Meaning when foo changes, ng-show does not change accordingly. –  Apr 08 '16 at 12:57
  • 2
    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 – Naren Aug 23 '17 at 08:07
  • I receive `Error: [$parse:syntax] Syntax Error: Token '{' invalid key at ..`. – fabpico Apr 07 '20 at 07:43
28

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>
Umur Kontacı
  • 35,403
  • 8
  • 73
  • 96
  • 5
    or you can use angular's helper function, angular.isUndefined(object) / angular.isDefined(object) – Bruno Peres Jul 16 '15 at 17:03
  • 1
    I would argue that not being able to handle an object with an undefined property is bad design front end code. – SSH This Apr 13 '17 at 19:46
9

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/

Oakley
  • 646
  • 10
  • 22
  • You're right, didn't think of it that way. Editing answer – Oakley Nov 20 '14 at 15:13
  • 2
    This is not correct either, since `undefined` is not a JavaScript keyword (it's a variable). See http://stackoverflow.com/questions/7173773/why-nan-and-undefined-are-not-reserved-keywords-in-javascript – Josh Darnell Nov 20 '14 at 15:21
  • 3
    It is better practice to do `return (foo === undefined);` than `return (typeof foo === 'undefined');`. – volent Apr 01 '15 at 10:07
  • 1
    @Oakley Please note === operator itself check value and type as well. So you don't need to do complex code using typeof operator – dextermini Sep 27 '16 at 06:20
6

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.

Tahsis Claus
  • 1,879
  • 1
  • 15
  • 27
4

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>

Naguib Ihab
  • 4,259
  • 7
  • 44
  • 80
1

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

Syed Usman
  • 300
  • 3
  • 8
1

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://stackoverflow.com/a/34707750/6225126

Mahdi Fathalla
  • 41
  • 5
  • 1
    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. – impulsgraw Aug 29 '18 at 11:12
1

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/

D-Unit
  • 11
  • 1
-1

try this angular.isUndefined(value);

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

hamil.Dev
  • 137
  • 2
  • 9
-3

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

Falcon
  • 29
  • 5