Условно измените img src на основе данных модели

Я хочу представить данные модели в виде разных изображений с помощью Angular, но некоторые проблемы с поиском "правильного" способа сделать это. Angular API-документы в выражениях говорят, что условные выражения не допускаются...

Упрощая упрощение, данные модели извлекаются через AJAX и показывают статус каждого интерфейса на маршрутизаторе. Что-то вроде:

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

Итак, в Angular мы можем отображать состояние каждого интерфейса с чем-то вроде:

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

НО. Вместо значений из модели я хотел бы показать подходящее изображение. Что-то после этой общей идеи.

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

(Я думаю, что Ember поддерживает этот тип конструкции)

Конечно, я мог бы изменить контроллер, чтобы возвращать URL-адреса изображений на основе фактических данных модели, но это, по-видимому, нарушает разделение модели и представления, нет?

Эта публикация SO предложила использовать директиву для изменения источника bg-img. Но потом мы вернулись к размещению URL-адресов в JS, а не в шаблоне...

Все предложения оценены. Благодарю.

прошу прощения за любые опечатки

Ответы

Ответ 1

Вместо src вам нужно ng-src.

Представления AngularJS поддерживают двоичные операторы

condition && true || false

Итак, тэг img будет выглядеть следующим образом:

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

Примечание: здесь важны кавычки (т.е. "green-checkmark.png" ). Это не будет работать без кавычек.

plunker here (открыть инструменты для просмотра готового HTML)

Ответ 2

Другая альтернатива (кроме бинарных операторов, предложенная @jm-), заключается в использовании 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, вероятно, будет лучше/проще, если у вас больше двух изображений.

Ответ 3

Другой способ.

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

Ответ 4

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