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

Question

我想使用 Angular 将模型数据表示为不同的图像，但在找到“正确”的方法时遇到一些困难。 Angular API docs on expressions说不允许条件表达式...

简化了很多，模型数据是通过 AJAX 获取的，并向您显示路由器上每个接口(interface)的状态。像这样的东西:

$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 支持这种类型的构造)

当然，我可以修改 Controller 以根据实际模型数据返回图像 URL，但这似乎违反了模型和 View 的分离，不是吗？

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

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

请原谅任何拼写错误

Answer 1

您需要 ng-src，而不是 src。

AngularJS View 支持二元运算符

condition && true || false

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

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

注意:引号(即“green-checkmark.png”)在这里很重要。如果没有引号，它将无法工作。

plunker here (打开开发工具查看生成的 HTML)