仅获取一张 ng-repeat 图像作为背景图像

Question

尝试从 ng-repeat 中抓取一张图像用作 div 的背景图像。到目前为止：

<div ng-repeat="photo in inventory.photos">
<div class="details-image" style="background-image: url({{photo}})">
            </div>
</div>

这当然是显示所有的照片。我如何只抓取该组的第一张图片？

Answer 1

试试这个：

<div ng-repeat="photo in inventory.photos">
    <div class="details-image" style="background-image: url({{inventory.photos[0]}})">
    </div>
</div>

我希望你不是为了得到第一张而循环浏览照片。如果你是，那么你甚至不需要 ng-repeat。

<div>
    <div class="details-image" style="background-image: url({{inventory.photos[0]}})">
    </div>
</div>

Answer 2

您可以尝试使用 $first、$middle 或 $last。例如：

<div ng-repeat="photo in inventory.photos">
<div class="details-image" style="background-image: url({{inventory.photos[$first]}})">
            </div>
</div>

Linkhere。查看 $first、$middle 或 $last 和 $index 的工作原理

Answer 3

不要使用 ng-repeat，先 select

    <div class="details-image" ng-style="{'background-image': 'url('+ inventory.photos[0]+')'">
    </div>

仅获取一张 ng-repeat 图像作为背景图像

Get only one image of ng-repeat for a background image

javascript

angularjs

indexing

ng-repeat