74

我想使用 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，但这似乎违反了模型和视图的分离，不是吗？

这个 SO Posting建议使用指令来更改 bg-img 源。但随后我们又回到将 URL 放入 JS 而不是模板中......

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

请原谅任何错别字

4

5 回答 5

171

而不是src你需要ng-src.

AngularJS 视图支持二元运算符

condition && true || false

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

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

注意：引号（即'green-checkmark.png'）在这里很重要。没有引号就行不通。

plunker here （打开开发工具查看生成的 HTML）

于 2012-12-22T03:36:28.410 回答
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 可能会更好/更容易。

于 2012-12-22T05:43:49.883 回答
23

其他方式 ..

<img ng-src="{{!video.playing ? 'img/icons/play-rounded-button-outline.svg' : 'img/icons/pause-thin-rounded-button.svg'}}" />
于 2016-06-21T12:39:43.940 回答
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>
于 2015-01-06T17:28:29.150 回答
4

对于我用过的角度 4

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

It works for me , I hope it may use to other's also for Angular 4-5. :)

于 2018-05-12T12:05:02.203 回答