Marco Marco - 5 months ago 35
AngularJS Question

Angular if/else switch

I am listing articles and they have cover image but some have also an external link like youtube. In case when they have an external link I should display iframe, and if they don't have the link I should show the cover image. I am not sure how to do that, I am pretty new to angular. Can I set it up somehow in controller or should I do some ng-switch statement in the view?
This is part of the code that I am trying to achieve:

<!-- what I need is something like if external_media.length != 0 -->
<iframe src="{{ article.external_media.original_url}}"></iframe>
<!-- else -->
<img src="http://coop.app/imagecache/cover/{{article.cover_image}}">


This is how the data that I get for an article looks.

117:Object
category_id:1
challenge_id:1
comments:Array[3]
cover_image:"1465913551.5549-photo-1460378150801-e2c95cb65a50.jpeg"
created_at:"2016-06-14 14:14:12"
external_media:Array[1]
0:Object
article_id:117
created_at:"2016-06-14 14:14:13"
id:1
original_url:"https://www.youtube.com/watch?v=p9ELYMhJZlI"
updated_at:"2016-06-14 14:14:13"
url:"https://www.youtube.com/embed/p9ELYMhJZlI?feature=oembed"


And this is my view:

<ion-item ng-repeat="article in articles" href="#/main/article/{{article.id}}" class="item-light">
<div class="article">
<!-- what I need is something like if external_media.length != 0 -->
<iframe src="{{ article.external_media.original_url}}"></iframe>
<!-- else -->
<img src="http://coop.app/imagecache/cover/{{article.cover_image}}">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>

<div class="row">
<div class="col col-20">
<a href="#" class="subdued">
<i ng-click="like(article)" ng-class="{ 'ion-ios-heart' : article.like == 1, 'ion-ios-heart-outline' : article.like == 0}"></i> Lik
</a>
</div>
<div class="col col-70">
<a href="#" class="subdued">
<i class="icon ion-ios-chatbubble"></i> {{ article.comments.length }} Kommentarer
</a>
</div>
<div class="col col-10 right">
<a href="#/main/article/{{article.id}}" class="subdued">
<i class="icon ion-chevron-right"></i>
</a>
</div>
</div>
</ion-item>

Answer

Here is a possibility using ng-show (doc)

What I added ?

<img ng-show="article.external_media.length == 0 || article.external_media.url == ''"  src="http://coop.app/imagecache/cover/{{article.cover_image}}">
<iframe ng-show="article.external_media.length > 0 && article.external_media.url != ''" src="{{ article.external_media.original_url}}"></iframe>

For the image : It will check that there is no external_media or that the url is empty

For the IFrame : It will check that there is an external_media and that there is an url

All together

<ion-item ng-repeat="article in articles" href="#/main/article/{{article.id}}" class="item-light">
  <div class="article">
  <!--  <img src="{{ fileServer }}/imagecache/cover/{{article.cover_image}}"> -->
    <img ng-show="article.external_media.length == 0 || article.external_media.url == ''"  src="http://coop.app/imagecache/cover/{{article.cover_image}}">
    <iframe ng-show="article.external_media.length > 0 && article.external_media.url != ''" src="{{ article.external_media.original_url}}"></iframe>
    <h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
  </div>

  <div class="row">
    <div class="col col-20">
      <a href="#" class="subdued">
        <i ng-click="like(article)" ng-class="{ 'ion-ios-heart' : article.like == 1, 'ion-ios-heart-outline' : article.like == 0}"></i> Lik
      </a>
    </div>
    <div class="col col-70">
      <a href="#" class="subdued">
        <i class="icon ion-ios-chatbubble"></i> {{ article.comments.length }} Kommentarer
      </a>
    </div>
    <div class="col col-10 right">
      <a href="#/main/article/{{article.id}}" class="subdued">
        <i class="icon ion-chevron-right"></i>
      </a>
    </div>
  </div>
</ion-item>