Question

我有一个模板，它按以下方式构建......

<div ng-repeat="itemEntry in itemEntry">
   <!-- content -->
    <section class="product-view-wrapper" ng-repeat="productView in itemEntry.Productview">
      <div class="slide" ng-repeat="productImg in itemEntry.productImgs">
        <img ng-src="{{productImgs.img}}"/>
      </div>
     <!-- Content -->
 </section>
 </div>

是否可以在ng-repeat内嵌套两个重复？如果基于上面的例子这是正确的html方法吗？

我还有一个json文件，如下所示：

    image: "http://www.colette.fr/media/push/swa_mmm_001255.jpg",
                                productTitle: "Ipath lowrunner",
                                productDesc: "Low skateshoes - Grey",
                                user: "knows",
                                price: "$17",
                                productImgs: [
                                                {img: "http://www.colette.fr/media/push/swa_mmm_001255.jpg"},
                                                {img: "http://www.colette.fr/media/push/paddin265.jpg"}
                                ]
                            },

但是我注意到通过inspect元素查看时没有出现productImg内容。当双重嵌套ng-repeat函数时，再次是正确的结构 - 如果这样做甚至可以做到的话？

click on demo for a more in depth example

Answer 1

您不会重复嵌套重复中的正确数组。我将你的演示缩放到相关的html问题

<section class="product-view-wrapper" ng-repeat="productObject in itemEntry">
  <!-- each loop of the <section> will output from productObject contained in itemEntry array -->
  <h3>{{productObject.productDesc}}</h3>
  <img ng-src="{{productObject.image}}" height="120px">
  <h4>Repeating images</h4>
   <!-- want to loop over array contained in each productObject -->
  <div class="slide" ng-repeat="productImg in productObject.productImgs" style="float:left">
    <img ng-src="{{productImg.img}}" height="80px" />
  </div>
  <hr style="clear:both">

</section>

的 DEMO

如何加倍嵌套角度ng-repeat

1 个答案: