Angular If Statement

Question

我是Angular的新手，我想知道如何執行類似於if語句的操作。

我使用離子建立我的web應用程序，並有一個XML飼料進來以縮略圖這是這個樣子「{{post.thumbnail}}」

這裏是我試圖做展示如果圖像爲空，則爲替代圖像。

<div ng-hide="{{post.thumbnail}} == null"> 
    <img src="{{post.thumbnail}}" width="100" height="100" alt=""/> 
</div> 
<div ng-hide="{{post.thumbnail}} != null"> 
    <img src="img/dining.jpg" width="100" height="100" alt=""/> 
</div> 

Answer 1

您可以使用ng-if OR ng-show/hide。或者另一種方法可能是在控制器中執行if-else。如果有多個條件需要檢查，這也將避免重複<div>。

控制器：

if $scope.post.thumbnail != null { 
    $scope.imageSrc = $scope.post.thumbnail 
} else { 
    $scope.imageSrc = 'img/dining.jpg' 
} 

和模板：

<div><img src="{{imageSrc}}" width="100" height="100" alt=""/></div> 

Answer 2

你可以使用ng-if：

<div ng-if="post.thumbnail"> 
    <img ng-src="{{post.thumbnail}}" width="100" height="100" alt=""/> 
</div> 
<div ng-if="!post.thumbnail"> 
    <img src="img/dining.jpg" width="100" height="100" alt=""/> 
</div> 

Answer 3

<div ng-hide="post.thumbnail == null"><img src="{{post.thumbnail}}" width="100" height="100" alt=""/></div> 
<div ng-hide="post.thumbnail != null"><img src="img/dining.jpg" width="100" height="100" alt=""/></div>