CODEWITHSUNDEEP
angularjsangularjs-ng-show
Sebastian Barth
Sebastian Barth

Reputation: 4517

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

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>

Upvotes: 60

Views: 148883

Answers (10)

hamil.Dev
hamil.Dev

Reputation: 388

try this angular.isUndefined(value);

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

Upvotes: -1

D-Unit
D-Unit

Reputation: 11

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/

Upvotes: 1

Mahdi Fathalla
Mahdi Fathalla

Reputation: 41

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

Upvotes: 1

Tahsis Claus
Tahsis Claus

Reputation: 1919

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.

Upvotes: 6

Syed Usman
Syed Usman

Reputation: 300

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

Upvotes: 1

Naguib Ihab
Naguib Ihab

Reputation: 4496

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>

Upvotes: 4

Falcon
Falcon

Reputation: 29

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

Upvotes: -3

jlewkovich
jlewkovich

Reputation: 2775

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!

Upvotes: 69

Oakley
Oakley

Reputation: 666

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/

Upvotes: 9

Umur Kontacı
Umur Kontacı

Reputation: 35478

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>

Upvotes: 28

Related Questions