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

我想表示模型数据作为不同的图像使用角度,但有一些麻烦找到“正确”的方式来做到这一点。角 关于表达式的 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 Posted 建议使用一个指令来更改 bg-img 源。但是我们又回到了把 URL 放到 JS 中而不是模板中..。

感谢你的建议,谢谢。

请原谅任何打字错误

108741 次浏览

你需要 ng-src而不是 src

AngularJS 视图支持二进制运算符

condition && true || false

所以你的 img标签应该是这样的

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

注意 : 引号(即‘ green-checkmark.png’)在这里很重要。

Plunker here < em > (打开 dev tools 查看生成的 HTML)

另一种替代方法(@jm-建议的二进制运算符除外)是使用 开关:

<span ng-switch on="interface">
<img ng-switch-when="UP" src='green-checkmark.png'>
<img ng-switch-default   src='big-black-X.png'>
</span>

如果你有两个以上的图像,n- 开关可能会更好/更容易。

<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>

另一种方式. 。

<img ng-src="\{\{!video.playing ? 'img/icons/play-rounded-button-outline.svg' : 'img/icons/pause-thin-rounded-button.svg'}}" />

对于角4,我已经使用

<img [src]="data.pic ? data.pic : 'assets/images/no-image.png' " alt="Image" title="Image">

它对我很有用,我希望对别人也适用于 Angular 4-5。 :)