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

发布时间：2020-12-17 09:05:36 所属栏目：安全来源：网络整理

导读：我想使用Angular代表模型数据作为不同的图像，但有一些麻烦找到“正确”的方式来做。 Angular API docs on expressions表示不允许使用条件表达式… 简化很多，模型数据通过AJAX获取并显示路由器上每个接口的状态。就像是： $scope.interfaces = ["UP","DOWN"

我想使用Angular代表模型数据作为不同的图像，但有一些麻烦找到“正确”的方式来做。 Angular API docs on expressions表示不允许使用条件表达式…

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

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

因此，在Angular中，我们可以显示每个接口的状态，如：

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

BUT – 而不是来自模型的值，我想显示一个合适的图像。一些遵循这个一般的想法。

<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不是模板…

所有建议赞赏。谢谢。

请原谅任何错别字

而不是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)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!