如果不为空，则在angularJS中显示隐藏

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.

Answer 1

Something like,

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

It will help to achieve.

Answer 2

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

Answer 3

\n

\n

\n

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

\n

\n

\n