我想使用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中,而不是放在模板中……
感谢所有的建议。谢谢。
请原谅任何打字错误
发布于 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可能会更好/更容易。
发布于 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'}}" />
发布于 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>
https://stackoverflow.com/questions/13999659
复制相似问题