根据模型数据有条件地更改img src
我想用Angular将模型数据表示为不同的图像，但是在find“正确”的方法时遇到了一些麻烦。 expression式的Angular API文档说不允许条件expression式…
简化了很多，模型数据通过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支持这种types的构造）
当然，我可以修改控制器根据实际的模型数据返回图像的URL，但这似乎违反了模型和视图的分离，不是吗？
这个SO贴子build议使用一个指令来改变bg-img源码。 但是，然后我们又回到了JS的url，而不是模板…
所有的build议感激。 谢谢。
请原谅任何错误
而不是src你需要ng-src 。
AngularJS视图支持二元运算符
condition && true || false
所以你的img标签看起来像这样
<img ng-src="{{interface == 'UP' && 'green-checkmark.png' || 'big-black-X.png'}}"/>
注意 ：引号（即'green-checkmark.png'）在这里很重要。 这不会没有引号。
plunker在这里 （开放的开发工具，看到生产的HTML）
另一个select（@ jm-build议的二元运算符除外）是使用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可能会更好/更容易。
其他方式 ..
<img ng-src="{{!video.playing ? 'img/icons/play-rounded-button-outline.svg' : 'img/icons/pause-thin-rounded-button.svg'}}" />
<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>
