angularjs: if statement for displaying one image versus another

Question

i am new to angularjs. i am trying to display a table with some data read from a db. one of the pieces of data i receive from DB is called IS_LOCKED. if it's 1, i want to display an image of a locked padlock, else display an image of an unlocked padlock.

if i do the following in angular where i write out "LOCKED" and "UNLOCKED", the output table is correct:

    <tr ng-repeat="x in retData.projects | orderBy:'NAME'">
            <td>{{ x.NAME }}</td>
            <td>{{ x.IS_LOCKED==1 ? "LOCKED" : "UNLOCKED" }}</td>
    </tr>

if i do the if statement and print out the url, it doesn't work....i get the code back and both images display, ie: "{{ x.IS_LOCKED===1 ? (locked padlock image here) : (unlocked padlock image here)}}"

  <tr ng-repeat="x in retData.projects | orderBy:'NAME'">
         <td>{{ x.NAME }}</td>
         <td>{{ x.IS_LOCKED==1 ? <img src=./images/padlock_locked.png width=20 height=20> : <img src=./images/padlock_unlocked.png width=20 height=20>}}</td>
  </tr>

tried doing some ng-switch and other things, but kept getting compile errors. sorry, new to angular...not sure if i am doing this correctly. anyone know how to do this right?

yangli-io · Accepted Answer · 2015-01-11 23:58:04Z

1

Use ng-src

<td><img ng-src="{{(x.IS_LOCKED == 1) ? './images/padlock_locked.png' : './images/padlock_unlocked.png'}}" width=20 height=20></td>

answered Jan 11, 2015 at 23:58

yangli-io

17.4k8 gold badges43 silver badges50 bronze badges

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

1 Comment

yangli-io Over a year ago

You're welcome, please mark the question as answered if there are no more pending queries.

Collectives™ on Stack Overflow

angularjs: if statement for displaying one image versus another

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related