如何在 html 中使用 AngularJS 成对显示图像

Question

我正在使用 AngularJS 开发一个应用程序。我想在页面中显示产品列表，但成对显示，因此每行将显示两个图像。产品是使用 REST 服务加载的。所以让我们假设我们已经在集合“产品”中加载了所有产品。我用来迭代产品的代码是：

<div id="products">
    <div class="row" data-ng-repeat="product in products">
        <div class="col-xs-12">
            <img alt="" 
                 data-ng-src="{{product.pathToImage}}" 
                 height="300"
                 width="200px">
        </div>
    </div>
</div>

像这样所有产品都连续显示，有没有办法或者有人可以给我一些想法来迭代集合但在同一行显示两个（或更多）图像？

非常感谢您！

Answer 1

选项 1：将产品排序为数组对数组，其中数组对每个包含两个产品。然后，您可以执行两次 ng-repeat。

Ng-repeat=成对成对 Ng-重复产物成对 图片代码在这里

选项 2：以“角度方式”执行此操作并创建您自己的自定义角度过滤器，将数据按摩成可以在单个 ng-repeat 中循环的格式。您可以使用“|”在 ng-repeat 中应用过滤器。我不会给你代码，因为你需要花一些时间自己实现一些基本的自定义过滤器来了解它们是如何工作的，并且有几个在线博客你可以参考。 Egghead.io 是一个很棒的资源。