javascript - 图像的 Ng-repeat，但第一张图像位于不同的 div 类中

Question

我尝试使用 ng-repeat 显示产品图像，但问题是 1 个图像位于不同的 div 中。让我展示我的代码并解释发生了什么。

这是 API 的响应，它为我提供了产品详细信息和图像

[{"id_product":"1000","name":"Nikolaus Mount","description":"Ullam labore quibusdam itaque accusamus non ad. Quia architecto voluptates eius. Sed debitis in esse aliquid enim et. Accusamus eos ad distinctio et dolorem.","date_c":"2016-01-08 01:50:45","alias":"nikolaus-mount","images":"[
{\"thumbImage\":\"http:\\\/\\\/lorempixel.com\\\/250\\\/150\\\/?71031\",\"image\":\"http:\\\/\\\/lorempixel.com\\\/1024\\\/768\\\/?38988\",\"position\":0},
{\"thumbImage\":\"http:\\\/\\\/lorempixel.com\\\/250\\\/150\\\/?80440\",\"image\":\"http:\\\/\\\/lorempixel.com\\\/1024\\\/768\\\/?66785\",\"position\":1},
{\"thumbImage\":\"http:\\\/\\\/lorempixel.com\\\/250\\\/150\\\/?64090\",\"image\":\"http:\\\/\\\/lorempixel.com\\\/1024\\\/768\\\/?86379\",\"position\":2},
{\"thumbImage\":\"http:\\\/\\\/lorempixel.com\\\/250\\\/150\\\/?23739\",\"image\":\"http:\\\/\\\/lorempixel.com\\\/1024\\\/768\\\/?25077\",\"position\":3},
{\"thumbImage\":\"http:\\\/\\\/lorempixel.com\\\/250\\\/150\\\/?86200\",\"image\":\"http:\\\/\\\/lorempixel.com\\\/1024\\\/768\\\/?48215\",\"position\":4}]","catAlias":"car-parts","parAlias":"cars-and-bikes"}
]

这是渲染图像的 HTML

<!-- Product Image & Available Colors -->
   <div class="col-sm-6">
      <div class="product-image-large">
         <a href="{{product[0].images[0].image}}" data-lightbox="roadtrip" data-title="{{product[0].name}}">
         <img src="{{product[0].images[0].image}}" alt="{{product[0].name}}">
         </a>
   </div>
   <div class="colors" ng-repeat="i in product[0].images">
      <a href="{{i.image}}" data-lightbox="roadtrip" data-title="{{product[0].name}}" >
      <img src="{{i.thumbImage}}" alt="{{product[0].name}}" style="float:left; width: 20%;">
      </a>
    </div>
</div>
<!-- End Product Image & Available Colors -->

所以问题是我打印了第一个可用的大图像，然后我必须在 ng-repeat 中重复所有 5 个图像。我不想重复大图相同的图像。我不想实现只能使用 ng-repeat 一次，第一个图像必须打印在 <div class="product-image-large"> 内并且接下来的所有图像必须打印在 <div class="colors"><!-- image data --></div> 中

希望你能理解我。如果您需要任何其他解释或代码，请告诉我，我会提供。提前致谢。

Answer 1

您可以调整ng-repeat，这样第一张图像就不会出现在其中:

<div class="colors" 
     ng-repeat="i in product[0].images"
     ng-if="!$first"> <!-- this will exclude the first item from the DOM -->
    ..
</div>

正如@HackedByChinese提到的，here is the source您可以在其中检查 ng-repeat 指令所利用的变量。

<小时/>

如果元素(DOM 树)完全相同(如您的情况)，您只需添加一个类，如 @Mutmatt 提到的:

<div ng-class="{ 'product-image-large': $first, 'colors product-image-small': !$first }" 
     ng-repeat="i in product[0].images">
    ..
</div>

和你的CSS:

.product-image-large img {
    /* a height larger than normal */
}

.product-image-small img {
    float:left; 
    width: 20%;
}