Angular中的嵌套值/关键ng重复

Question

我很难在代码中使用几个嵌套的ng-repeats。 我有一个带有几层的json对象，我试图遍历各层并显示数据。 这是json的结构

{
"status": "success",
"data": {
    "Mat": {
        "total": 0,
        "pending_devices": 0,
        "individual_counts": {
            "Mat1": {
                "total": 0,
                "pending_devices": 0,
                "locations": []
            },
            "Mat2": {
                "total": 0,
                "pending_devices": 0,
                "locations": [
                    {
                        "location1": 5
                    },
                    {
                        "location2": 2
                    }
                ]
            }
        }
    },
    "Cable": {
        "total": 0,
        "pending_devices": 0,
        "individual_counts": {
            "Flat Cable": {
                "total": 0,
                "pending_devices": 0,
                "locations": []
            },
            "L Cable": {
                "total": 0,
                "pending_devices": 0,
                "locations": [
                    {
                        "location1": 5
                    },
                    {
                        "location2": 2
                    }
                ]
            }
        }
    }
}

}

这是我正在循环使用的代码：

<md-grid-tile ng-repeat="(key, value) in vm.counts" class="{{vm.colors[$index]}}" md-rowspan="2">
  <md-grid-tile-body>
    <h2>Total:{{value.total}}</h2>
    <h2>Pending:{{value.pending_devices}}</h2>
    <p ng-repeat="(productType, productCounts) in value.individual_counts">
      <h3>{{productType}}:</h3>
      <h4>Total:{{productCounts.total}}</h4>
      <h4>Pending:{{productCounts.pending_devices}}</h4>
      <h4>Locations:</h4>
      <div ng-repeat="(location, locationCount) in productCounts.locations">
        <h5>{{location}}:{{locationCount}}</h5>
      </div>
    </p>
  </md-grid-tile-body>
  <md-grid-tile-footer>
    <h3>{{key}}</h3>
  </md-grid-tile-footer>
</md-grid-tile>

我可以毫无问题地遍历顶层，但是对于productType / ProductTypeCount循环及其以下没有任何显示。 我输出了value.individual_counts以验证它是否包含正确的数据，并且确实如此。 在此先感谢您的帮助。

Answer 1

您应该尝试使用div而不是p。 段落元素不能包含块级元素。