基于模型数据条件的改变IMG SRC [英] Conditionally change img src based on model data

问题描述

我想用角，但遇到了一些麻烦找到正确的方式做到这一点，重新present模型数据不同的图像。对前pressions的角度 API文档说，有条件的前pressions是不允许的。 ..

I want to represent model data as different images using Angular but having some trouble finding the "right" way to do it. The Angular API docs on expressions say that conditional expressions are not allowed...

简化了很多，模型数据是通过AJAX获取并显示你的路由器上的每个接口的状态。是这样的：

Simplifying a lot, the model data is fetched via AJAX and shows you the status of each interface on a router. Something like:

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

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

So, in Angular, we can display the state of each interface with something like:

<ul>
  <li ng-repeat=interface in interfaces>{{interface}}
</ul>

但是 - 而不是从模型的价值观，我想显示适当的图像。下面的东西这个总体思路。

BUT - Instead of the values from the model, I'd like to show a suitable image. Something following this general idea.

<ul>
  <li ng-repeat=interface in interfaces>
    {{if interface=="UP"}}
       <img src='green-checkmark.png'>
    {{else}}
       <img src='big-black-X.png'>
    {{/if}}
</ul>

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

当然，我可以修改控制器返回基于实际的模型数据图片网址，但似乎违反模型和视图的分离，不是吗？

Of course, I could modify the controller to return image URLs based on the actual model data but that seems to violate the separation of model and view, no?

<一个href=\"http://stackoverflow.com/questions/13781685/angularjs-ng-src-equivalent-for-background-imageurl/13782311#13782311\">This因此发布会使用指令来改变BG-IMG源建议。但是，我们又回到了把网址中的JS不是模板...

This SO Posting suggested using a directive to change the bg-img source. But then we are back to putting URLs in the JS not the template...

所有建议AP preciated。谢谢。

All suggestions appreciated. Thanks.

的请原谅任何错字的

推荐答案

您需要 NG-SRC 。

AngularJS意见支持二进制运算符

AngularJS views support binary operators

condition && true || false

所以你的 IMG 标记看起来像这样

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

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

Note : the quotes (ie 'green-checkmark.png') are important here. It won't work without quotes.

plunker这里的（开放的开发工具，看所产生的HTML）

这篇关于基于模型数据条件的改变IMG SRC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！