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或网址是否为空

对于IFrame：它会检查是否有external_media并且有一个网址

一起

<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

你可以使用＆＃34; ng-if＆＃34;，如： ...

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

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

表达可以是，例如：
article.external_media！= undefined ＆amp;＆amp; article.external_media [0] .url！= undefined

PLUS ng-if的其他替代方法是：ng-hide或ng-show，您可以在ng-if vs ng-show/ng-hide

中查看有关它的更多信息

角度if / else切换

2 个答案: