Hide element if angular attribute is empty

Question

I have an image element that is getting its path from an attribute I have on my angular object. However if this (imagePath) is empty I get a broken image. I would like to not render the image if the attribute is empty however I do not see a way to do this. Any ideas?

<img width="50px" src="/resources/img/products/{{current.manufacturerImage.imagePath}}">

real iif: stackoverflow.com/questions/14164371/…

bresleveloper
– bresleveloper

2013-08-08 21:51:30 +00:00
Commented Aug 8, 2013 at 21:51 — bresleveloper
– bresleveloper, Commented Aug 8, 2013 at 21:51

Hinek · Accepted Answer · 2016-03-15 12:53:23Z

21

You want to check out ngHide directive.

So your code would look something like.

<img width="50px" ng-hide="current.manufacturerImage.imagePath == ''" 
src="/resources/img/products/{{current.manufacturerImage.imagePath}}">

Alternatively, you could also try the suggestion by darkporter

<img width="50px" ng-show="current.manufacturerImage.imagePath" 
src="/resources/img/products/{{current.manufacturerImage.imagePath}}">

You could also update this to check if the object is null or undefined then hide the element.

edited Mar 15, 2016 at 12:53

Hinek

9,81912 gold badges56 silver badges77 bronze badges

answered Apr 25, 2013 at 22:27

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jpsimons Over a year ago

Pretty sure ng-hide/show don't need proper booleans and can use truthiness. I'd do ng-show="current.manufacturerImage.imagePath"

adamdport Over a year ago

@darkporter, be careful with this approach with any value that can be 0 though, like an ID, as this could be parsed incorrectly as falsy.

Nafeez Quraishi · Accepted Answer · 2021-12-20 19:35:39Z

1

Alternatively ngIf directive can be used as below:

<img width="50px" *ngIf="current.manufacturerImage.imagePath !== ''" 
src="/resources/img/products/{{current.manufacturerImage.imagePath}}">

answered Dec 20, 2021 at 19:35

Nafeez Quraishi

6,2162 gold badges30 silver badges35 bronze badges

1 Comment

zmanc Over a year ago

this is now the correct answer. Thank you for keeping it updated.

Tj Gienger · Accepted Answer · 2015-06-22 17:00:13Z

0

This suggestion wouldn't work for me because I was generating my image links based on a users role. The user had a role, but that didn't mean they had an image associated with it.

So I created a directive:

angular.module('hideEmptyImages', [])
.directive('hideEmptyImage',function() {
    return {
        Restrict: 'AE',
        Link: function (scope, elem, attrs) {
            elem.error(function() {
                elem.hide();
            });
        }
    };
});

So:

<img hide-empty-image width="50px" src="/resources/img/products/{{current.manufacturerImage.imagePath}}">

will not show if the .imagePath is empty or if there simply isn't an associated image.

answered Jun 22, 2015 at 17:00

Tj Gienger

1,4051 gold badge13 silver badges17 bronze badges

Collectives™ on Stack Overflow

Hide element if angular attribute is empty

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related