有条件地根据模型数据更改img src

Question

我想使用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 Posting建议使用指令更改bg-img源.但后来我们回到把JS放在JS而不是模板中......

所有建议都赞赏.谢谢.

请原谅任何错别字

Answer 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 (打开dev工具查看生成的HTML)

Answer 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可能会更好/更容易.

Answer 3

其他方式 ..

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

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