我想使用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发布建议使用伪指令来更改bg-img源。但是然后我们回到将URL放入JS而不是模板中的方式…
所有建议表示赞赏。谢谢。
请原谅任何错别字
而不是src你需要ng-src。
src
ng-src
AngularJS视图支持二进制运算符
condition && true || false
所以你的img标签看起来像这样
img
<img ng-src="{{interface == 'UP' && 'green-checkmark.png' || 'big-black-X.png'}}"/>
注意 :这里的引号(即’green-checkmark.png’)很重要。没有引号就无法使用。
在这里查看代码 (打开开发工具以查看生成的HTML)