如何使用AngularJS在html页面中显示嵌套循环？

Question

我有JSON数据我不知道如何在angularJS中编写嵌套循环。在这里我使用两个$ index一个是父级，另一个是用于孩子，但它不适用于我。

在这里priceTag是一个嵌套数组。但是我无法访问这个嵌套数组。请帮我解决这个问题。我是angularJS的新手

这是我的JSON数据

$scope.products=
[
     {
      "catId": "569df86dd08598371e9b5ad8",
      "pname": "ABCD",
      "priceTag": [
           {
                "pModel": "50gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           },
           {
                "pModel": "150gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           }
      ],
      "id": "569e0abed08598371ebe5421",
      "createdOn": "19-Jan-2016 09:29:26 UTC"         
     },
     {
      "catId": "569df86dd08598371e9b5ad8",
      "pname": "BACD",
      "priceTag": [
           {
                "pModel": "50gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           },
           {
                "pModel": "150gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           }
      ],
      "id": "569e0abed08598371ebe5423",
      "createdOn": "19-Jan-2016 09:29:26 UTC"         
     },
     {
      "catId": "569df86dd08598371e9b5ad8",
      "pname": "CABD",
      "priceTag": [
           {
                "pModel": "25gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           },
           {
                "pModel": "150gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           }
      ],
      "id": "569e0abed08598371ebe5424",
      "createdOn": "19-Jan-2016 09:29:26 UTC"         
     },
]

这是我的index.html

<div ng-repeat="product in products">
{{$index+1}} &nbsp;{{product.pname}}

    <div ng-repeat="ptag in product.priceTag track by $index">
    {{$index}} &nbsp;{{ptag.pModel}} &nbsp;{{ptag.actualPrice}}   
    </div>

</div>

Answer 1

       {{$index+1}}  {{product.pname}}

这一定是

      {{product.$index+1}}  {{product.pname}}

和这个

     <div ng-repeat="ptag in product.priceTag track by $index">
     {{$index}} &nbsp;{{ptag.pModel}} &nbsp;{{ptag.actualPrice}}   
     </div>

通过

     <div ng-repeat="ptag in product.priceTag track by product.$index">
     {{ptag.$index}} &nbsp;{{ptag.pModel}} &nbsp;{{ptag.actualPrice}}   
     </div>

Answer 2

以下是简单示例HOPE，它可以帮助您解决问题，但下次会给出一些错误消息。

angular.module('tt', []).controller('TTTT', function($scope) {
  $scope.products = [{
    "catId": "569df86dd08598371e9b5ad8",
    "pname": "ABCD",
    "priceTag": [{
      "pModel": "50gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }, {
      "pModel": "150gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }],
    "id": "569e0abed08598371ebe5421",
    "createdOn": "19-Jan-2016 09:29:26 UTC"
  }, {
    "catId": "569df86dd08598371e9b5ad8",
    "pname": "BACD",
    "priceTag": [{
      "pModel": "50gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }, {
      "pModel": "150gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }],
    "id": "569e0abed08598371ebe5423",
    "createdOn": "19-Jan-2016 09:29:26 UTC"
  }, {
    "catId": "569df86dd08598371e9b5ad8",
    "pname": "CABD",
    "priceTag": [{
      "pModel": "25gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }, {
      "pModel": "150gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }],
    "id": "569e0abed08598371ebe5424",
    "createdOn": "19-Jan-2016 09:29:26 UTC"
  }];
  console.log($scope.products);
});

<div ng-app="tt" ng-controller="TTTT">
  <div ng-repeat="product in products track by $index">
    {{$index + 1}} &nbsp;{{product.pname}}
    <div ng-repeat="ptag in product.priceTag track by $index">
      {{$parent.$index +1 }}.{{ $index + 1}} &nbsp;{{ptag.pModel}} &nbsp;{{ptag.actualPrice}}
    </div>

  </div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>