檢查項目爲空或不在ng-repeat中，然後設置默認圖像

Question

我正在使用ng-repeat來綁定數據，但存在一個問題，即在圖像列中顯示的數據中存在圖像使用{{obj.Image}} 這裏是我的代碼

<table class="table table-bordered table-hover"> 
          <thead> 
           <tr> 
            <th> 
             Sr. no. 
            </th> 

            <th> 
             Title 
            </th> 

            <th> 
             Image 
            </th> 
            <th> 
             Category 
            </th> 
            <th> 
             SubCategory 
            </th> 
            <th> 
            PostedOn 
            </th> 
            <th> 
             Created By 
            </th> 
            <th> 
             Status 
            </th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr ng-repeat="obj in PostedBlogList"> 
            <td>{{$index+1}}</td> 
            <td><a ng-href="{{'//'+obj.PageUrl }}">{{obj.Title}}</a></td> 
            <td> <img style="width:90px"src="{{obj.Image}}" /></td> 
            <td> 
             {{obj.CategoryName}} 
            </td> 
            <td> 
             {{obj.SubCategoryName}} 
            </td> 
            <td> 
            {{obj.CreatedDate}} 
            </td> 
            <td> 
             <button class="btn btn-primary" type="submit" value="Activate">Activate</button> 
            </td> 
            <td> 
             <button class="btn btn-primary" type="submit" value="Activate">Activate</button> 
            </td> 
           </tr> 
          </tbody> 
         </table> 

我想要顯示的默認圖像<img src="~/images/mail.png" alt="">

在<td> <img style="width:90px"src="{{obj.Image}}" /></td>

當我的對象{{obj.Image}}爲空。 我如何檢查條件？

Answer 1

有多種方式來做到這一點。

您可以使用兩種img標籤和使用ng-show隱藏其中之一根據obj.image：

<img ng-show="obj.Image" src="{{obj.Image}}"> 
<img ng-show="!obj.Image" src="default"> 

你也可以在你的控制器函數返回正確的URL：

<img src="{{getImage(obj.Image)}}"> 


$scope.getImage(img) = function{ 
    return img ? img : '~/images/mail.png'; 
}; 

Answer 2

你可以調用一個控制器的函數來決定URL的內容。

ng-href="{{ showImage(obj) }}" 

代碼

$scope.showImage = function(obj){ 
    return obj.PageUrl ? '//'+ obj.PageUrl: '~/images/mail.png' 
}