Javascript Ng对图像重复，但firs图像在不同的div类中

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

这是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 -->

所以问题是，我打印第一个可用的图像作为大的，然后我必须重复所有5个图像在ng重复。我不想重复大图中的相同图像。 我不想实现我只能使用ng repeat一次，第一个图像必须在

内部打印，接下来的所有图像必须在

中打印

---

我希望你能理解我。如果你需要任何额外的解释或代码，让我知道，我会提供。提前感谢。

您可以调整

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>

还有你的css：

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

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

---

您可以调整

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>

还有你的css：

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

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

---

我想解释一下ng repeat提供的几个“神奇”变量，它们有助于解决这类问题：速度很快。干得好我不知道$first选项。你也可以使用

data ng class=“'special-first-class'：$first，'other div class'：！$first”

只添加一个类而不是一个完整的div。我将解释ng repeat提供的几个“神奇”变量来帮助完成这类事情：这很快。干得好我不知道$first选项。您也可以使用

data ng class=“'special-first-class'：$first，'other div class'：！$first”

只添加一个类而不是一个完整的div