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

72

我想使用Angular将模型数据表示为不同的图像，但是在寻找“正确”的方法时遇到了一些麻烦。表达式的Angular 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，但这似乎违反了模型和视图的分离，不是吗？

这样发布建议使用伪指令来更改bg-img源。但是，然后我们回到将URL放入JS而不是模板中的方式...

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

请原谅任何错别字

angularjs

— 丹尼
source

170

而不是src你需要ng-src。

AngularJS视图支持二进制运算符

condition && true || false

所以你的img标签看起来像这样

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

注意：这里的引号（即“ green-checkmark.png”）很重要。没有引号就无法使用。

在这里查看代码 （打开开发工具以查看生成的HTML）

— 杰米
source

谢谢！我确实在文档中查找了这些信息，但是它们在表达式上相当稀疏。

— 丹尼（Danny）

3

这是一个救命稻草。该文档真的不提，你可以在NG-SRC使用二进制运算符

— 肯尼斯·范·Coppenolle

4

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

— 阿什莉·戴维斯

1

我们可以添加多个条件到ng-src吗？

— Sutirth '16

2

@Sutirth：是的，通过使用一个函数：<img ng-src="{{myfunction(interface)}}"/>并根据控制器中该函数中的多个条件返回答案。

— 2016年

33

另一个替代方法（@ 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可能会更好/更容易。

— 马克·拉杰科克
source

21

另一种方式 ..

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

— pkdkk
source

5

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

— 米亚
source

2

我尝试了一下，只显示了很小的时间就显示了两个图像。

— Sebastialonso

1

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

— 李·布林德里

4

对于角度4，我已经使用

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

它对我有用，我希望它对其他人也有用Angular 4-5。:)

— 沙钦沙（Sachin Shah）
source