Show hide in angularJS if not empty

Question

I have these two images

<img ng-show="cat1.PictureURIs[0].URI" src="{{cat1.PictureURIs[0].URI}}" />
<img ng-hide="cat1.PictureURIs[0].URI" src="/assets/img/placeholder.png">

Problem: If {{cat1.PictureURIs[0].URI}} not empty display first image else display second image. I use ng-show, ng-hide but not working.

Not working means: where {{cat1.PictureURIs[0].URI}} is not empty its also display second image, and where is {{cat1.PictureURIs[0].URI}} empty at that place its also displaying second image, but when I remove ng-show it display first image correctly.

What is not working ? It is working here: plnkr.co/edit/70Rhng29h1LHIoYie5gT?p=preview — Rayon
– Rayon, Commented Jan 5, 2016 at 7:38

Kunal Kakkad · Accepted Answer · 2016-01-05 07:58:40Z

1

Please update your code as follows:

<img ng-show="cat1.PictureURIs[0].URI != ''" src="{{cat1.PictureURIs[0].URI}}" />
<img ng-hide="cat1.PictureURIs[0].URI != ''" src="/assets/img/placeholder.png">

Give it a try.

Hope it works.!

answered Jan 5, 2016 at 7:58

Kunal Kakkad

6516 silver badges20 bronze badges

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

Comments

Sathish · Accepted Answer · 2016-01-05 07:43:03Z

1

Something like,

<img ng-src="{{cat1.PictureURIs[0].URI? cat1.PictureURIs[0].URI : ('/assets/img/placeholder.png')}}"/>

It will help to achieve.

answered Jan 5, 2016 at 7:43

Sathish

2,4601 gold badge16 silver badges27 bronze badges

Comments

nmanikiran · Accepted Answer · 2016-01-05 11:17:03Z

1

<img ng-src="{{cat1.PictureURIs[0].URI || '/assets/img/placeholder.png'}}" />

answered Jan 5, 2016 at 11:17

nmanikiran

3,1981 gold badge19 silver badges21 bronze badges

1 Comment

ryanyuyu Over a year ago

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. For example, it's not immediately obvious what the difference is in your answer. You might want to explain ng-src.

Collectives™ on Stack Overflow

Show hide in angularJS if not empty

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related