Showing image using ternary operator with AngularJs Data Binding

Question

I am trying to use angular.js ternary operator to show an image, I was wondering if there was a way to achieve something like the following

{{enquiry.buyer_email ? <img ng-src="/images/ico_yes.png"> : <img ng-src="/images/ico_no.png"> }}

nbarbosa · Accepted Answer · 2016-05-05 02:00:50Z

10

I'm assuming you have a mistake in your paths because they are the same, so I'm going to use ico_no.png instead for one of the cases.

You could do something like this with ternary operators (Angular >= 1.1.5):

<img ng-src="{{enquiry.buyer_email ? '/images/ico_yes.png' : '/images/ico_no.png'}}">

Or something like this with binary operators:

<img ng-src="{{enquiry.buyer_email && '/images/ico_yes.png' || '/images/ico_no.png'}}">

or you could use ng-show:

<img ng-src="/images/ico_yes.png" ng-show="enquiry.buyer_email">
<img ng-src="/images/ico_no.png" ng-show="!enquiry.buyer_email">

answered May 5, 2016 at 1:51

nbarbosa

1,7221 gold badge13 silver badges10 bronze badges

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

6 Comments

So sorry yes that was the correct path. Thank you so much your first solution worked like a charm!

Is there a way to use it with the ternary operator though?

I see you fixed it :)

I just updated the answer to cover the ternary operator

@Oh another fix, thank you for this ill mark it as correct answer ;)

|