モデルデータに基づいてimg srcを条件付きで変更する

質問

Angularを使用してモデルデータを異なる画像として表現したいのですが、それを行うための"right"方法を見つけるのに苦労しています。 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のソースを変更するためにディレクティブを使用することを提案しました。 しかし、それでは、テンプレートではなく JS に URL を置くことに戻ってしまいます...。

すべての提案に感謝します。 ありがとうございます。

誤字脱字をお許しください。

どのように解決するのですか？

の代わりに src の代わりに ng-src .

AngularJSのビューは二項演算子をサポートしています。

condition && true || false

では、あなたの img タグは次のようになります。

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

注意 : ここでは引用符 (すなわち 'green-checkmark.png') が重要です。引用符がないと動きません。

ここにプランカー (生成されたHTMLを見るには開発ツールを開いてください)