如何在 html 中使用 AngularJS 成对显示图像
How to display images in pairs using AngularJS in html
我正在使用 AngularJS 开发应用程序。我想在页面中显示产品列表,但成对显示,因此每行将显示两张图片。使用 REST 服务加载产品。因此,假设我们已经将所有产品加载到集合 "products" 中。我用来迭代产品的代码是:
<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>
像这样,所有产品都连续显示,有没有办法或者有人能给我一些想法来迭代集合但在同一行显示两个(或更多)图像?
非常感谢您!
选项 1:将产品分类到数组对数组中,其中每个数组对包含两个产品。然后你可以做两次 ng-repeat。
Ng-repeat=pair 成对
成对的 Ng 重复产物
img代码在这里
选项 2:执行 "angular way" 并创建您自己的自定义 angular 过滤器,将数据按摩成可以在单个 ng-repeat 中循环的格式。您可以使用“|”在 ng-repeat 中应用过滤器。我不会给你代码,因为你需要花一些时间自己实现一些基本的自定义过滤器来理解它们是如何工作的,你可以参考几个在线博客。 Egghead.io 是一个很好的资源。
我正在使用 AngularJS 开发应用程序。我想在页面中显示产品列表,但成对显示,因此每行将显示两张图片。使用 REST 服务加载产品。因此,假设我们已经将所有产品加载到集合 "products" 中。我用来迭代产品的代码是:
<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>
像这样,所有产品都连续显示,有没有办法或者有人能给我一些想法来迭代集合但在同一行显示两个(或更多)图像?
非常感谢您!
选项 1:将产品分类到数组对数组中,其中每个数组对包含两个产品。然后你可以做两次 ng-repeat。
Ng-repeat=pair 成对 成对的 Ng 重复产物 img代码在这里
选项 2:执行 "angular way" 并创建您自己的自定义 angular 过滤器,将数据按摩成可以在单个 ng-repeat 中循环的格式。您可以使用“|”在 ng-repeat 中应用过滤器。我不会给你代码,因为你需要花一些时间自己实现一些基本的自定义过滤器来理解它们是如何工作的,你可以参考几个在线博客。 Egghead.io 是一个很好的资源。