使用 ng-repeat 对图像和链接文本进行 AngularJS 循环和格式化答案

【问题标题】：AngularJS Loops and Formatting with ng-repeat for image and link text使用 ng-repeat 对图像和链接文本进行 AngularJS 循环和格式化
【发布时间】：2015-09-01 08:54:02
【问题描述】：

我需要能够将图像列表（在我的情况下为 4 个）排列成一行，并且链接文本如下所示：

row1
image1          image2           image3         image4
linkText1       linkText2        linkText3      linkText4

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

不管有多少图像都是如此。在这里，无论您单击图像还是其链接文本，它都应该在新窗口中打开一个文档。

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

    <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 张图片全部，那么这将是一个容量 = 3 的对象数组，其中每个数组元素（行）本身是一个包含 4 个图像对象的数组我的所有数据都是正确的，只是模板有问题。任何帮助都是非常感谢。

【问题讨论】：

标签： css angularjs image anchor ng-repeat

【解决方案1】：

div 标记是块级元素，因此除非您将 CSS 显示属性更改为 inline-block，否则它将出现在自己的行上。具体来说，您需要针对包含img 和链接的div 的显示属性。

这是一个关于 codepen 的示例：
http://codepen.io/gwmccull/pen/LpYLLp

【讨论】：

我也尝试过使用 display 属性，但没有帮助。
gwmccull - 你能给我一个示例标记吗？
gwmccull - 非常感谢，说的还不够。我能够对其进行调整以满足我的需要。
@user428602 很高兴我能帮上忙！

【解决方案2】：

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

查看this

改编自here

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

【讨论】：

这是否适用于图像和每个图像下方的链接文本，以及您建议的索引方法？样品将不胜感激。
它会起作用的。您只需将它们都放在同一个元素中，并将布局安排在另一个之上。此外，请注意图像大小和屏幕画布的总和，它可能会删除一些图像。很抱歉，我有点忙，现在无法为您创建示例，但应该很快。