根据模型数据有条件地更改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>