Angular If Statement

Question

I am new to Angular and I would like to know how to do something similar to an if statement.

I am using ionic to build my web app and have an xml feed coming in with a thumbnail which is shown like this "{{post.thumbnail}}"

Here is what I tried to do to show an alternative image if the image is empty.

<div ng-hide="{{post.thumbnail}} == null">
  <img src="{{post.thumbnail}}" width="100" height="100" alt=""/>
</div>
<div ng-hide="{{post.thumbnail}} != null">
  <img src="img/dining.jpg" width="100" height="100" alt=""/>
</div>

nathanhleung · Accepted Answer · 2015-11-22 16:06:49Z

1

You could use ng-if:

<div ng-if="post.thumbnail">
  <img ng-src="{{post.thumbnail}}" width="100" height="100" alt=""/>
</div>
<div ng-if="!post.thumbnail">
  <img src="img/dining.jpg" width="100" height="100" alt=""/>
</div>

answered Nov 22, 2015 at 16:06

nathanhleung

5166 silver badges15 bronze badges

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

Comments

Alexander Elgin · Accepted Answer · 2015-11-22 16:07:52Z

1

<div ng-hide="post.thumbnail == null"><img src="{{post.thumbnail}}" width="100" height="100" alt=""/></div>
<div ng-hide="post.thumbnail != null"><img src="img/dining.jpg" width="100" height="100" alt=""/></div>

answered Nov 22, 2015 at 16:07

Alexander Elgin

6,9954 gold badges44 silver badges53 bronze badges

3 Comments

Jason Over a year ago

Thanks, while most of the comments work, this is the most practical and what I was looking for. Tx! Btw I ended up getting rid of the div's and use the ng-hide in the image tags :)

Muhsin Keloth Over a year ago

@Jason:Use === and !== for comparison in js

Alexander Elgin Over a year ago

@Muhsin Use the extra = if it is required to compare including type

Chirag B · Accepted Answer · 2015-11-22 16:18:56Z

0

You can use ng-if OR ng-show/hide. OR Another approach could be to do if-else in Controller. This will also avoid duplication of <div> if there are more than one condition to be checked.

Controller:

if $scope.post.thumbnail != null {
  $scope.imageSrc = $scope.post.thumbnail
} else {
   $scope.imageSrc = 'img/dining.jpg'
}

and in template:

<div><img src="{{imageSrc}}" width="100" height="100" alt=""/></div>

answered Nov 22, 2015 at 16:18

Chirag B

2,1162 gold badges20 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular If Statement

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related