Проверить элемент нулевым или нет в 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' 
}