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>
-
Welcome to StackOverflow! Please see "Should questions include “tags” in their titles?", where the consensus is "no, they should not".user57508– user575082014-11-20 15:06:14 +00:00Commented Nov 20, 2014 at 15:06
-
3Ah, 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– Josh Darnell2014-11-20 15:08:49 +00:00Commented Nov 20, 2014 at 15:08
Add a comment
|
10 Answers
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!
3 Comments
Naren
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
fabpico
I receive
Error: [$parse:syntax] Syntax Error: Token '{' invalid key at ...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>
2 Comments
Bruno Peres
or you can use angular's helper function, angular.isUndefined(object) / angular.isDefined(object)
SSH This
I would argue that not being able to handle an object with an undefined property is bad design front end code.
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' );
}
4 Comments
Oakley
You're right, didn't think of it that way. Editing answer
Josh Darnell
This is not correct either, since
undefined is not a JavaScript keyword (it's a variable). See stackoverflow.com/questions/7173773/…
volent
It is better practice to do
return (foo === undefined); than return (typeof foo === 'undefined');.
dextermini
@Oakley Please note === operator itself check value and type as well. So you don't need to do complex code using typeof operator
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.
Comments
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>
Comments
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
Comments
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>
For technical explanation for the double pipe, I prefer to take a look on this link: https://stackoverflow.com/a/34707750/6225126
1 Comment
impulsgraw
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.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>
Comments
try this angular.isUndefined(value);
https://docs.angularjs.org/api/ng/function/angular.isUndefined
Comments
<p ng-show="angular.isUndefined(foo)">Show this if $scope.foo === undefined</p>
