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