Check item is null or not in ng-repeat and then set the default image

Question

I am using ng-repeat to bind the data but there is an issue that there is an image in a data which I am showing in image column by using {{obj.Image}} Here is my code

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

I want to display the default image <img src="~/images/mail.png" alt="">

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

when my object {{obj.Image}} is null. How can i check the condition?

Answer 1

There are multiple ways to do that.

You can use two img tags and use ng-show to hide one of them depending on obj.image:

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

You can also have a function in your controller which returns the proper url:

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


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

Answer 2

You could call a controller a function to decide what the URL would be.

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

Code

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