在其他人之间交替重复结果

Question

我有一个博客，内容通过从DB获取数据的AngularJS控制器完成。

另一方面，由位于特定目录中的图像文件符合的对象

现在，有了这两个对象，我想实现一个 ng-repeat，每 2 个帖子显示 4 张图像，如下所示：

<div>post 1</div>
<div>post 2</div>
<div>post 3</div>
<div>post 4</div>
<div>image 1</div>
<div>image 2</div>
<div>post 5</div>
<div>post 6</div>
<div>post 7</div>
<div>post 8</div>
<div>image 3</div>
<div>image 4</div>
<div>post 9</div>
<div>...

问题在于图像重复。而是在第一次重复后继续图像 3 和 4，控制器一次又一次地显示图像 1 和 2。

我当前的代码是这样的：

<div ng-controller="noticias">
  <div ng-repeat-start="noticia in noticias">
    <h1>{{ noticia.titulo }}</h1>
    <p>{{ noticia.asunto }}</p>
  </div>
  <div ng-repeat-end ng-if="($index+1) % 4 ===0">
    <div ng-repeat="anuncio in anuncios | limitTo: 2>
      <img ng-src="anuncios/{{ anuncio.nombre }}
    </div>
  </div>
</div>

Answer 1

与其再次启动 ng-repeat，不如跟踪最后一个渲染图像的索引，然后将其用作索引。类似于以下代码的东西应该有效，其中 imageIndex 是控制器中的一个整数属性，在初始化时将其设置为 0。我还没有测试过它，尽管进行了一些调整，但这应该可以工作：

<div ng-controller="noticias">
 <div ng-repeat-start="noticia in noticias">
 <h1>{{ noticia.titulo }}</h1>
 <p>{{ noticia.asunto }}</p>
</div>
<div ng-repeat-end ng-if="($index+1) % 4 ===0">
 <div>
   <img ng-src="anuncios/{{ anuncios[ctrl.imageIndex].nombre }}"/>
   <img ng-src="anuncios/{{ anuncios[ctrl.imageIndex+1].nombre }}"/>
    {ctrl.imageIndex = ctrl.imageIndex+1}
 </div>
</div>