Angular if/else switch

Question

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>

Updated code:

I have tried the suggestions in the answers but I can get the video in the iframe. I get the link for the video, but nothing is displayed in the iframe. This is the code:

<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[0].url}}"></iframe>
        {{ article.external_media[0].url}}
          <h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
        </div>

The docs for ngSwitch are pretty straight forward. Go ahead and try it. docs.angularjs.org/api/ng/directive/ngSwitch — forgivenson
– forgivenson, Commented Jul 5, 2016 at 14:39
Look into using ng-show, along with a scoped variable to control whether the element gets shown or hidden. — Tim Biegeleisen
– Tim Biegeleisen, Commented Jul 5, 2016 at 14:39
Possible duplicate of if else statement in AngularJS templates — Joe Clay
– Joe Clay, Commented Jul 5, 2016 at 14:40
@forgivenson Yes, but I don't have a single expression that I can evaluate, I get external_media and cover_image separately, so not sure how to do it with ng-switch — Ludwig
– Ludwig, Commented Jul 5, 2016 at 14:41
What part do you want to show or hide ? Where is the Iframe you need ? — Weedoze
– Weedoze, Commented Jul 5, 2016 at 14:43

Samuel Bolduc · Accepted Answer · 2016-07-05 14:54:53Z

1

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>

edited Jul 5, 2016 at 14:54

Samuel Bolduc

19.3k8 gold badges37 silver badges59 bronze badges

answered Jul 5, 2016 at 14:49

Weedoze

14k2 gold badges38 silver badges65 bronze badges

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

2 Comments

Ludwig Over a year ago

I have tried your method but I can't access the article.external_media.url I have tried to see if it shows anything by just trying to display the content of article.external_media.url but it is not displaying anything, I have also tried with {{ article.external_media[0].url}} and then it displays the content or the link in this case, when I am testing it on its own, but it is not displaying video.

Ludwig Over a year ago

I have made a new question for that here

Community · Accepted Answer · 2017-05-23 12:22:46Z

0

U can use "ng-if", like: ...

<div ng-if="EXPRESSION" >
 <iframe ...> </iframe>
 /* Have media*/
</div>

<div ng-if="!EXPRESSION" >
 /* Don't have media*/
</div>

EXPRESSION can be, for example:
article.external_media != undefined && article.external_media[0].url != undefined

PLUS Other alternative to ng-if is: ng-hide or ng-show, you can see more informations about it in
ng-if vs ng-show/ng-hide

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jul 5, 2016 at 14:53

Renan Campos de Oliveira

305 bronze badges

Collectives™ on Stack Overflow

Angular if/else switch

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related