check if JS value exists before displaying HTML

Question

I would like to display the following HTML with angular value; ONLY IF the value exists, how could I wrap the below around an if statement, to check if a value exists FIRST, then if it does; display this inner html.

I'd like to do this inline; ideally with a ternary operator.

<span class="bloCK" ng-mouseover="showPopover()" ng-mouseleave="hidePopover()"><a href="{{website.coolUrl}}" target="_blank">Cool Website</a></span>

What version of Angular are you using? Because this looks more like AngularJS, which is quite different from Angular... — Heretic Monkey
– Heretic Monkey, Commented Sep 12, 2019 at 15:05
Possible duplicate of How can I conditionally display HTML in a button using AngularJS? — Heretic Monkey
– Heretic Monkey, Commented Sep 12, 2019 at 15:11

kshetline · Accepted Answer · 2019-09-12 15:08:14Z

1

I'm guessing that "the value" you're talking about is website.coolUrl, in which case you can do:

<span ng-if="website && website.coolUrl"
    class="bloCK" ng-mouseover="showPopover()"
    ng-mouseleave="hidePopover()">
  <a href="{{website.coolUrl}}" target="_blank">Cool Website</a></span>

Update... Oops!

It's only after I posted this that I saw you meant AngularJS, not Angular. I modified my answer for that, but it's been a long time since I did any AngularJS.

answered Sep 12, 2019 at 15:08

kshetline

14k6 gold badges49 silver badges96 bronze badges

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

3 Comments

Petr Averyanov Over a year ago

ng-if="website && website.coolUrl" makes no sense, simple ng-if="website.coolUrl" does same. To avoid problems one always prefers ng-href to href

kshetline Over a year ago

Since I didn't have all of the particulars of the situation, I couldn't know for sure if website itself could always be trusted to be defined. In that case, website && website.coolUrl is safer, as it prevents trying to access a property of a potentially undefined value. I'm not sure about AngularJS, but Angular also supports the form website?.coolUrl for safe navigation.

Petr Averyanov Over a year ago

I understand that from Angular point of view it may seem "safer" :) But in AngularJS world template never complains that something is undefined. And it saves you tons of code... e.g. "a && a.b && a.b.c && a.b.c.d"

Collectives™ on Stack Overflow

check if JS value exists before displaying HTML

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related