根据模型数据有条件地更改img src
根据模型数据有条件地更改img src
提问于 2012-12-22 10:50:25
我想使用Angular将模型数据表示为不同的图像，但在找到“正确”的方法时遇到了一些困难。Angular API docs on expressions说条件表达式是不允许的...
简化了很多，模型数据通过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，但这似乎违反了模型和视图的分离，不是吗？
This SO Posting建议使用指令来更改bg-img源代码。但是我们又回到了把URL放在JS中，而不是放在模板中……
感谢所有的建议。谢谢。
请原谅任何打字错误
回答 4
Stack Overflow用户
发布于 2012-12-22 13:43:50
另一种替代方法(@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-switch可能会更好/更容易。
Stack Overflow用户
发布于 2016-06-21 20:39:44
另一种方式..
<img ng-src="{{!video.playing ? 'img/icons/play-rounded-button-outline.svg' : 'img/icons/pause-thin-rounded-button.svg'}}" />Stack Overflow用户
发布于 2015-01-07 01:28:29
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13999659
复制相关文章
相似问题