AngularJS - Show DOM elements depending on the value of variable

Question

AngularJS - Show DOM elements depending on the value of variable

I've got the following AngularJS structure

<li ng-repeat="content in contents">
  <img src="{{content.image_url}}" />
  <div class="title">{{content_title}}</div>
</li>

But if "content.image_url" is NULL or it doesn't exist, I don't want to display the IMG tag. So something like

{{#if content.image_url}}
  <img.....
{{/if}}

Which is the handlebarjs way of doing a conditional check. How could I achieve this in AngularJS? Do I need a directive to do this?

javascript
angularjs

Answer 1

Use ng-show:

<li ng-repeat="content in contents">
  <img ng-show="content.image_url != ''" src="{{content.image_url}}" />
  <div class="title">{{content_title}}</div>
</li>

Also, I would use ng-src instead of src to avoid errors in the console while the image is loading:

<li ng-repeat="content in contents">
  <img ng-show="content.image_url != ''" ng-src="{{content.image_url}}" />
  <div class="title">{{content_title}}</div>
</li>