AngularJS 使用 ng-repeat 对图像和 link 文本进行循环和格式化

Question

我需要能够将图像列表（在我的例子中是 4 个）排列成一行，并且 link 文本显示在下面，如下所示：

row1
image1          image2           image3         image4
linkText1       linkText2        linkText3      linkText4

row2 
image5          image6....
linkText5       linkText6.....

等等，不管有多少图片。在这里，无论您单击图像还是单击其 link 文本，都应该在新的 window.

中打开文档

这是我想要的 html，但没有按照我想要的方式工作。它只是每行放一张图片。我尝试了各种组合似乎没有任何效果。虽然如果我只使用 img 元素并在其上使用 ng-repeat，图像会按照我想要的方式流动，连续 4 个，但这不符合我的目的，因为我也想要 link 文本在每张图片下方。

    <div ng-repeat="items in DocImageCollection ">
        <div ng-repeat="row in items">
          <img alt="{{row.linkText}}" 
ng-click="$event.preventDefault();openDocument({{row}});" ng-src="{{row.imageSrc}}" imageonload />
          <br />
          <span ng-click="$event.preventDefault();openDocument({{row}});"> 
           {{row.linkText}}</span>
         </div>
    </div>

这里 imageonload 是我为下载图片来源， DocImageCollection - 是主要的集合；例如如果我有 10 张图片 all，那么这将是一个 capacity = 3 的对象数组，其中每个数组元素（行）本身是一个包含 4 个图像对象的数组我的所有数据都是正确的，只是模板有问题。任何帮助是非常感谢。

Answer 1

您可以在 ng-repeat 中使用索引方法。

勾选this

改编自here

ps。您不一定会使用 ng-if，这仅适用于您只想显示 4

的倍数的情况

Answer 2

div 标签是块级元素，因此除非您将 CSS 显示属性更改为 inline-block，否则它将显示在自己的行中。具体来说，您需要将包含 img 和 link.

的 div 的显示属性作为目标

这是 codepen 上的示例：
http://codepen.io/gwmccull/pen/LpYLLp

AngularJS 使用 ng-repeat 对图像和 link 文本进行循环和格式化

AngularJS Loops and Formatting with ng-repeat for image and link text

css

anchor

image

angularjs

ng-repeat