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

【问题标题】：How to display nested loop in html page using AngularJS?如何使用AngularJS在html页面中显示嵌套循环？
【发布时间】：2016-03-10 09:08:43
【问题描述】：

我有 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>

【问题讨论】：

你的错误信息是什么？

标签： angularjs json angularjs-scope

【解决方案1】：

这是一个简单的例子，希望它对您的问题有所帮助，但下次给出一些错误消息。

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>

【讨论】：

【解决方案2】：

       {{$index+1}} &nbsp;{{product.pname}}

这一定是

      {{product.$index+1}} &nbsp;{{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>

【讨论】：