我想使用Angular代表模型数据作为不同的图像,但有一些麻烦找到“正确”的方式来做。 Angular
API docs on expressions表示不允许使用条件表达式…
简化很多,模型数据通过AJAX获取并显示路由器上每个接口的状态。就像是:
$scope.interfaces = ["UP","DOWN","UP","DOWN"]
因此,在Angular中,我们可以显示每个接口的状态,如:
<ul> <li ng-repeat=interface in interfaces>{{interface}} </ul>
BUT – 而不是来自模型的值,我想显示一个合适的图像。一些遵循这个一般的想法。
<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,但似乎违反了模型和视图的分离,没有?
This SO Posting建议使用指令更改bg-img源。但是,然后我们回到把URL放在JS不是模板…
所有建议赞赏。谢谢。
请原谅任何错别字
而不是src,你需要ng-src。
原文链接:/angularjs/146722.htmlAngularJS视图支持二进制运算符
condition && true || false
所以你的img标签会是这样的
<img ng-src="{{interface == 'UP' && 'green-checkmark.png' || 'big-black-X.png'}}"/>
注意:引号(即’green-checkmark.png’)在这里很重要。它不会工作,没有引号。
plunker here(开放工具查看生成的HTML)