74

Angularを使用してモデルデータを別の画像として表現したいのですが、それを行うための「正しい」方法を見つけるのに問題があります。式に関するAngularAPIのドキュメントには、条件式は許可されていないと記載されています...

非常に単純化して、モデルデータは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を配置することに戻ります...

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

タイプミスは許してください

4

5 に答える 5

171

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 を表示)

于 2012-12-22T03:36:28.410 に答える
33

別の代替手段（@ 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>

3つ以上の画像がある場合は、ng-switchの方が優れている/簡単です。

于 2012-12-22T05:43:49.883 に答える
23

別の方法 ..

<img ng-src="{{!video.playing ? 'img/icons/play-rounded-button-outline.svg' : 'img/icons/pause-thin-rounded-button.svg'}}" />
于 2016-06-21T12:39:43.940 に答える
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>
于 2015-01-06T17:28:29.150 に答える