試圖從ng-repeat中抓取一個圖像作爲div的背景圖像。有這個到目前爲止:獲取背景圖像中只有一個ng-repeat的圖像
<div ng-repeat="photo in inventory.photos">
<div class="details-image" style="background-image: url({{photo}})">
</div>
</div>
哪個當然是顯示所有的照片。我將如何抓取該組的第一張圖片?
試圖從ng-repeat中抓取一個圖像作爲div的背景圖像。有這個到目前爲止:獲取背景圖像中只有一個ng-repeat的圖像
<div ng-repeat="photo in inventory.photos">
<div class="details-image" style="background-image: url({{photo}})">
</div>
</div>
哪個當然是顯示所有的照片。我將如何抓取該組的第一張圖片?
試試這個:
<div ng-repeat="photo in inventory.photos">
<div class="details-image" style="background-image: url({{inventory.photos[0]}})">
</div>
</div>
我希望你是不是在照片中只是獲得第一個的purspose循環。如果你是,那麼你甚至不需要ng-repeat。
<div>
<div class="details-image" style="background-image: url({{inventory.photos[0]}})">
</div>
</div>
您可以嘗試使用$first
,$middle
,或$last
。 例如:
<div ng-repeat="photo in inventory.photos">
<div class="details-image" style="background-image: url({{inventory.photos[$first]}})">
</div>
</div>
鏈接here。退房$first
,$middle
,或$last
和$index
工作
這是我即將要提供的答案。你可能有你仍然使用ng-repeat的理由。您也可以使用ng-if來查看$ index === 0是否切換整個div。 – Joao
如何不要使用NG-重複,只要選擇第一
<div class="details-image" ng-style="{'background-image': 'url('+ inventory.photos[0]+')'">
</div>
:)我是,但你的第二個樣本是我需要的。仍然從jQuery中解放了我的思想,所以我可以通過簡單地調用數組中對象的索引來獲得我所需要的事實,這仍然讓我非常頭疼。 –