如何加倍嵌套角度 ng-repeat答案

【问题标题】：how to double nest angular ng-repeat如何加倍嵌套角度 ng-repeat
【发布时间】：2013-12-29 15:48:59
【问题描述】：

我有一个按以下方式构造的模板...

<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"}
                                ]
                            },

但是我注意到productImg 内容在通过检查元素查看时没有出现。当双重嵌套一个 ng-repeat 函数时，这又是正确的结构——如果这甚至可以做到吗？

click on demo for a more in depth example

【问题讨论】：

可以的，看看这个问题的其他问题stackoverflow.com/search?q=nested+ng-repeat+

标签： javascript json angularjs angularjs-ng-repeat

【解决方案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

【讨论】：