Css AngularJS循环和格式化，图像和链接文本使用ng repeat

我需要能够安排一个列表的图像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个图像对象的数组 我所有的数据都是正确的，我只是在模板中有问题。任何帮助都是无效的

---

非常感谢。

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

检查

改编自

注：不一定要使用ng if，这仅在您只想显示4的倍数时才适用。div标记是块级元素，因此它将显示在自己的行上，除非您将CSS显示属性更改为内联块。具体来说，您需要针对包含img和link的div的display属性

下面是codepen的一个示例：

---

我也尝试过使用display属性，没有帮助。gwmccull-你能给我提供一个示例标记吗？gwmccull-非常感谢，说得还不够。我能够调整它以满足我的需要。@user428602很高兴我能帮上忙！这是否适用于图像和每个图像下方的链接文本，以及您建议的索引方法？样品将不胜感激。它将工作。您只需将它们放在同一个元素中，并将布局安排为一个在另一个之上。另外，注意图像大小和屏幕画布的总和，它可能会删除一些图像。我很抱歉，但我有点在某件事上，现在不能给你创造一个例子，但应该很快。