CODEWITHSUNDEEP
javascriptjqueryangularjsif-statementshow-hide
Muhammad Riaz
Muhammad Riaz

Reputation: 403

Show hide in angularJS if not empty

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.

Upvotes: 1

Views: 199

Answers (3)

nmanikiran
nmanikiran

Reputation: 3148

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

Upvotes: 1

Kunal Kakkad
Kunal Kakkad

Reputation: 653

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

Upvotes: 1

Sathish
Sathish

Reputation: 2460

Something like,

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

It will help to achieve.

Upvotes: 1

Related Questions