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    lt p ng-show  foo    undefined  gt Show this if  scope foo    undefined lt  p gt

User · Answer

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

User · Answer

As  impulsgraw wrote  You need to check for undefined after the pipes     lt div ng-show  foo    undefined  gt      Show this if foo is defined   lt  div gt   lt div ng-show  boo     undefined  gt      Show this if boo is undefined   lt  div gt    https   jsfiddle net mjfz2q9h 11

User · Answer

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   lt div ng-show  isUndefined foo   gt  lt  div gt

User · Answer

Here is the cleanest way to do this    lt p ng-show    foo     undefined    gt Show this if  scope foo     undefined lt  p gt    No need to create a helper function in the controller

User · Answer

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

User · Answer

try this angular isUndefined value    https   docs angularjs org api ng function angular isUndefined

User · Answer

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

User · Answer

If foo is not a boolean variable then this would work  i e  you want to show this when that variable has some data     lt p ng-show   foo  gt Show this if  scope foo is undefined lt  p gt   And vise-versa    lt p ng-show  foo  gt Show this if  scope foo is defined lt  p gt

User · Answer

Corrected   HTML       lt p ng-show  getFooUndef foo   gt Show this if  scope foo     undefined lt  p gt    JS   scope foo   undefined    scope getFooUndef   function foo       return   typeof foo      undefined         Fiddle  http   jsfiddle net oakley349 vtcff0w5 1

User · Answer

lt p ng-show  angular isUndefined foo   gt Show this if  scope foo     undefined lt  p gt

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

Examples related to angularjs

Examples related to angularjs-ng-show