How to get an AngularJS Expression to display nothing?

Question

Say I have the following HTML:

<p>{{ booleanVariable ? "The variable is true!" : null }}</p>

If booleanVariable is false, the expression should be empty and the  shouldn't render. However, it just prints the "null" into the  tag, as if I'd just typed null.

How would I get the expression to just render nothing?

snazzybouche · Accepted Answer · 2016-06-22 17:42:37Z

2

Use undefined instead of null.

<p>{{ booleanVariable ? "The variable is true!" : undefined }}</p>

A simpler solution would be ngShow:

<p ng-show="booleanVariable">The variable is true!</p>

answered Jun 22, 2016 at 17:42

snazzybouche

2,4523 gold badges31 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Washington Guedes Over a year ago

Using ng-show your element will be hidden which can be unwanted. (Example: element with css' paddings -- will break the layout). On the other hand, instead of null you can use "" double quotes.

Elad · Accepted Answer · 2016-06-22 17:48:46Z

1

Empty string is make sense.

<p>{{ booleanVariable ? "The variable is true!" : '' }}</p>

answered Jun 22, 2016 at 17:48

Elad

1,15410 silver badges16 bronze badges

Comments

Rohit Shedage · Accepted Answer · 2016-06-22 17:47:50Z

0

The best solution would be to use

The variable is true!

ng-show will have  in DOM but its just hidden if you use ng-if  will not be in DOM also

answered Jun 22, 2016 at 17:47

Rohit Shedage

26.2k2 gold badges17 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to get an AngularJS Expression to display nothing?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related