javascript - Showing image using ternary operator with AngularJs Data Binding

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"> }}

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"> }}

Share Improve this question edited May 5, 2016 at 1:52 asked May 5, 2016 at 1:41 seus 5689 silver badges32 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 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">