尝试使用Angular.js设置默认背景图片

Question

我刚开始接触Angular.js，我遇到了一个问题。我正在使用ng-重复来迭代一个新闻项目列表。每个项目都有一个标题和正文，但将有一个可选的图片url将用作背景。

我可以得到新闻项目元素与图片url显示时，有一个网址。参见下面的示例代码。

<li class="news-item col-md-6" ng-repeat="announcement in news.announcements | limitTo:8" ng-style="{'background-image': 'url({{announcement.Url}})'}">

当announcement.Url为NULL或未定义时，我需要将announcement.Url值设置为默认的背景图片URL。我不知道该怎么做。

任何帮助都将不胜感激。

谢谢!

Answer 1

<li class="news-item col-md-6" ng-repeat="announcement in news.announcements | limitTo:8" ng-style="{'background-image': 'url({{announcement.Url || \'path to default image\'}})'}">

{{和}}之间的任何东西都是一个角度表达式(对于初学者来说类似于javascript本身)。您可以简单地包含||运算符(一个逻辑OR)，然后将默认图像的路径放在字符串中。如果announcement.Url为null或未定义，那么它将是"falsy“，并将使用or条件的后半部分。

编辑:注意，我转义了字符串分隔符(\')，因为它们已经嵌套在使用这些分隔符的字符串中。