javascript - AngularJS - 根据变量的值显示 DOM 元素

Question

我有以下 AngularJS 结构

<li ng-repeat="content in contents">
  <img src="{{content.image_url}}" />
  <div class="title">{{content_title}}</div>
</li>

但是如果“content.image_url”为NULL或者它不存在，我不想显示IMG标签。所以像

{{#if content.image_url}}
  <img.....
{{/if}}

这是进行条件检查的handlebarjs方式。我如何在 AngularJS 中实现这一点？我需要一个指令来做到这一点吗？

Answer 1

使用 ng-show：

<li ng-repeat="content in contents">
  <img ng-show="content.image_url != ''" src="{{content.image_url}}" />
  <div class="title">{{content_title}}</div>
</li>

另外，我会使用ng-src而不是 src 以避免在加载图像时控制台中出现错误：

<li ng-repeat="content in contents">
  <img ng-show="content.image_url != ''" ng-src="{{content.image_url}}" />
  <div class="title">{{content_title}}</div>
</li>