CODEWITHSUNDEEP
javascriptangularjsindexingangularjs-ng-repeat
isaac weathers
isaac weathers

Reputation: 1472

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

Trying to just grab one image from an ng-repeat to use as a background image for a div. Have this so far:

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

Which of course is showing all the photos. How would I grab just the first image of that group?

Upvotes: 0

Views: 505

Answers (3)

Mehmet Otkun
Mehmet Otkun

Reputation: 1384

Don't use ng-repeat, just select first

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

Upvotes: 0

Cristi Berceanu
Cristi Berceanu

Reputation: 1693

You can try using the $first, $middle, or $last. For example:

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

Link here. Check out how the $first, $middle, or $last and $index work

Upvotes: 2

Karthik
Karthik

Reputation: 1377

Try this:

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

I hope you are not looping through the photos just for the purspose of getting the first one. If you are, then you wouldn't even need the ng-repeat.

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

Upvotes: 1

Related Questions