angularjs - link - Condicionalmente cambie img src en base a los datos del modelo

ng src angular 4

Question

Quiero representar los datos del modelo como diferentes imágenes utilizando Angular, pero tengo problemas para encontrar la forma "correcta" de hacerlo. Los documentos de la API angular en expresiones dicen que las expresiones condicionales no están permitidas ...

Simplificando mucho, los datos del modelo se obtienen a través de AJAX y le muestra el estado de cada interfaz en un enrutador. Algo como:

$scope.interfaces = ["UP", "DOWN", "UP", "UP", "UP", "UP", "DOWN"]

Entonces, en Angular, podemos mostrar el estado de cada interfaz con algo como:

<ul>
  <li ng-repeat=interface in interfaces>{{interface}}
</ul>

PERO - En lugar de los valores del modelo, me gustaría mostrar una imagen adecuada. Algo siguiendo esta idea general.

<ul>
  <li ng-repeat=interface in interfaces>
    {{if interface=="UP"}}
       <img src=''green-checkmark.png''>
    {{else}}
       <img src=''big-black-X.png''>
    {{/if}}
</ul>

(Creo que Ember admite este tipo de constructo)

Por supuesto, podría modificar el controlador para devolver URLs de imágenes basadas en los datos reales del modelo, pero eso parece violar la separación del modelo y la vista, ¿no?

Este anuncio SO sugirió el uso de una directiva para cambiar la fuente bg-img. Pero volvemos a poner URL en el JS, no en la plantilla ...

Todas las sugerencias apreciadas. Gracias.

por favor disculpe cualquier error tipográfico

Answer 1

De otra manera ..

<img ng-src="{{!video.playing ? ''img/icons/play-rounded-button-outline.svg'' : ''img/icons/pause-thin-rounded-button.svg''}}" />

Answer 2

En lugar de src necesita ng-src .

Las vistas AngularJS admiten operadores binarios

condition && true || false

Entonces tu etiqueta img se vería así

<img ng-src="{{interface == ''UP'' && ''green-checkmark.png'' || ''big-black-X.png''}}"/>

Nota : las comillas (es decir, ''green-checkmark.png'') son importantes aquí. No funcionará sin comillas.

plunker aquí (herramientas de desarrollo abierto para ver el HTML producido)

Answer 3

Otra alternativa (aparte de los operadores binarios sugeridos por @ jm-) es usar ng-switch :

<span ng-switch on="interface">
   <img ng-switch-when="UP" src=''green-checkmark.png''>
   <img ng-switch-default   src=''big-black-X.png''>
</span>

ng-switch probablemente será mejor / más fácil si tiene más de dos imágenes.

Answer 4

Para angular 4 he usado

<img [src]="data.pic ? data.pic : ''assets/images/no-image.png'' " alt="Image" title="Image">

Funciona para mí, espero que pueda usarse para otros también para Angular 4-5 . :)

Answer 5

<ul>
  <li ng-repeat=interface in interfaces>
       <img src=''green-checkmark.png'' ng-show="interface==''UP''" />
       <img src=''big-black-X.png'' ng-show="interface==''DOWN''" />
  </li>
</ul>