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

Question

我是Angular.js的新手，我遇到了一个问题。 我正在使用ng-repeat来遍历新闻列表。 每个项目都有一个标题和正文，但会有一个可选的图片网址，用作背景。

当有网址存在时，我可以获取带有图片网址的新闻项元素。 请参阅下面的示例代码

<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或Undefined时，我需要将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条件的后半部分。

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