angularjs – 根据模型数据有条件地更改img src

前端之家收集整理的这篇文章主要介绍了angularjs – 根据模型数据有条件地更改img src前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用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视图支持二进制运算符

condition && true || false

所以你的img标签会是这样的

<img ng-src="{{interface == 'UP' && 'green-checkmark.png' || 'big-black-X.png'}}"/>

注意:引号(即’green-checkmark.png’)在这里很重要。它不会工作,没有引号。

plunker here(开放工具查看生成的HTML)

原文链接:/angularjs/146722.html

猜你在找的Angularjs相关文章