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

我想使用Angular将模型数据表示为不同的图像，但在找到“正确”方法时遇到了一些问题。角API docs on expressions说条件表达式是不允许的...根据模型数据有条件地更改img src

简化很多，模型数据通过AJAX获取并显示您在路由器上的每个接口的状态。喜欢的东西：

$scope.interfaces = ["UP", "DOWN", "UP", "UP", "UP", "UP", "DOWN"]

所以，在角度，我们可以像显示每个接口的状态：

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

（我认为灰烬支持这种类型的构造）

当然，我可以修改控制器返回基于实际的模型数据，图像的URL，但似乎违反模型分离并查看，不是吗？

This SO Posting建议使用指令来更改bg-img源代码。但是，然后我们又回到了在JS中的URL不是模板...

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

请原谅任何错字

来源

2012-12-22 Danny

160

而不是src你需要ng-src。

AngularJS意见支持二进制运营商

condition && true || false

所以你img标签应该是这样

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

注意：引号（即 '绿checkmark.png'）是很重要的位置。它不会没有引号。

plunker here（开放开发工具看到产生HTML）

来源

2012-12-22 03:36:28 jaime

谢谢！我仔细查看了文档，但他们在表达式上很稀少。 – Danny

这是一个救生员;该文档没有提到可以在ng-src中使用二元运算符 –

在最新的不稳定Angular中（我在1.1.4上），可以使用ng-attr-以相同方式设置任何属性。 –

另一种替代方法（比@ jm-建议二元运算等）是使用ng-switch：

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

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

来源

2012-12-22 05:43:49

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

来源

2015-01-06 17:28:29 mia

我试着用它在很短的时间内显示两个图像。 – Sebastialonso

@Sebastialonso也许尝试ng-if代替？ –

它不工作的方式 –

另一种方式..

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

来源

2016-06-21 12:39:43 pkdkk

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

回答

相关问题