角度if/elseスイッチ

Question

私は記事を掲載していますが、カバー画像はありますが、YouTubeのような外部リンクもあります。彼らが外部リンクを持っている場合、私はiframeを表示する必要があり、彼らがリンクを持っていない場合、私は表紙画像を表示する必要があります。私はそれをどうやって行うのか分かりません。私はかなり新しい角度です。何らかの形でコントローラに設定することはできますか、またはビュー内でng-switch文を実行する必要がありますか？ これは私が達成しようとしているコードの一部です：

<!-- 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}}"> 

これは私が記事のために取得したデータがどのように見えるかです。

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" 

そして、これが私の見解です：

<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> 

更新されたコード：

私は答えで提案を試してみましたが、私は、iframe内に映像を得ることができます。動画のリンクが表示されますが、iframeには何も表示されません。これはコードです：ここでは

<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> 

Answer 1

は、私が追加何ng-show(doc)

を使用して可能性がありますか？画像については

<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> 

：それはexternal_mediaがないことやURLはiframe対応の

空であることを確認します：それはexternal_mediaがあることを確認しますと、URL

があること

すべて一緒に

<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> 

Answer 2

Uは次のように、 "NG-IF" を使用することができます。 =
article.external_media & & article.external_media [0] .URL =未定義

PLUS 他の代替的に未定義：！！ は...

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

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

EXPRESSIONは、たとえば、することができng-ifは：ng-hideまたはng-showです。詳細については、
ng-if vs ng-show/ng-hide