Conditionally change img src based on model data

Question

I want to represent model data as different images using Angular but having some trouble finding the  right  way to do it   The Angular API docs on expressions say that conditional expressions are not allowed     Simplifying a lot  the model data is fetched via AJAX and shows you the status of each interface on a router   Something like    scope interfaces     UP    DOWN    UP    UP    UP    UP    DOWN     So  in Angular  we can display the state of each interface with something like    lt ul gt     lt li ng-repeat interface in interfaces gt   interface    lt  ul gt    BUT - Instead of the values from the model  I d like to show a suitable image   Something following this general idea    lt ul gt     lt li ng-repeat interface in interfaces gt        if interface   UP            lt img src  green-checkmark png  gt        else           lt img src  big-black-X png  gt         if    lt  ul gt     I think Ember supports this type of construct   Of course  I could modify the controller to return image URLs based on the actual model data but that seems to violate the separation of model and view  no   This SO Posting suggested using a directive to change the bg-img source   But then we are back to putting URLs in the JS not the template     All suggestions appreciated   Thanks     please excuse any typos

User · Accepted Answer

Instead of src you need ng-src    AngularJS views support binary operators  condition  amp  amp  true    false   So your img tag would look like this   lt img ng-src    interface     UP   amp  amp   green-checkmark png      big-black-X png      gt    Note   the quotes  ie  green-checkmark png   are important here  It won t work without quotes   plunker here  open dev tools to see the produced HTML

User · Answer

lt ul gt     lt li ng-repeat interface in interfaces gt          lt img src  green-checkmark png  ng-show  interface   UP     gt          lt img src  big-black-X png  ng-show  interface   DOWN     gt     lt  li gt   lt  ul gt

User · Answer

Another way      lt img ng-src     video playing    img icons play-rounded-button-outline svg     img icons pause-thin-rounded-button svg       gt

User · Answer

Another alternative  other than binary operators suggested by  jm-  is to use ng-switch    lt span ng-switch on  interface  gt      lt img ng-switch-when  UP  src  green-checkmark png  gt      lt img ng-switch-default   src  big-black-X png  gt   lt  span gt    ng-switch will likely be better easier if you have more than two images

User · Answer

For angular 4 I have used    lt img  src   data pic   data pic    assets images no-image png    alt  Image  title  Image  gt    It works for me   I hope it may use to other s also for Angular 4-5

[angularjs] Conditionally change img src based on model data

Examples related to angularjs