一尘不染

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

angularjs

我想使用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而不是模板中的方式…

所有建议表示赞赏。谢谢。

请原谅任何错别字


阅读 230

收藏
2020-07-04

共1个答案

一尘不染

而不是src你需要ng-src

AngularJS视图支持二进制运算符

condition && true || false

所以你的img标签看起来像这样

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

注意 :这里的引号(即’green-checkmark.png’)很重要。没有引号就无法使用。

在这里查看代码
(打开开发工具以查看生成的HTML)

2020-07-04