在Angular中循环遍历JSON对象

Question

我有一个产品循环，这是完美的。

<div ng-repeat="result in results track by result.uid">
      <img ng-src="{{ result.img';" alt="{{ result.name }}"
           title="{{ result.name }}" />
      <p><span class="money">&pound;{{ result.price | number:2 }}</span></p>
      <p class="product-title">
        <a ng-href="{{ result.url }}">{{ result.name }}</a>
      </p>
</div>

在循环中，有一个具有JSON数据的对象。

{{result.colours}}

这包含以下内容：

    [
        {
            "id":866337128495,
            "title":"Product Title",
            "handle":"product-url",
            "image":"/img.jpg",
            "sku":"SKU001",
            "name":"Product Name",
            "type":"one_color",
            "data":"#000000"
        },
        {
            "id":866337128496,
            "title":"Product Title2",
            "handle":"product-url2",
            "image":"/img2.jpg",
            "sku":"SKU002",
            "name":"Product Name 2",
            "type":"one_color",
            "data":"#000000"
        }
]

我需要遍历这个，并尝试过：

<div ng-init="swatches=result.colours">
          <div ng-if="swatches">
                    <div ng-repeat="(key,value) in swatches">
                              {{key}}:{{value}}
                    </div>
           </div>
</div>

这简单地返回：

    0: [
        {
            "id":866337128495,
            "title":"Product Title",
            "handle":"product-url",
            "image":"/img.jpg",
            "sku":"SKU001",
            "name":"Product Name",
            "type":"one_color",
            "data":"#000000"
        },
        {
            "id":866337128496,
            "title":"Product Title2",
            "handle":"product-url2",
            "image":"/img2.jpg",
            "sku":"SKU002",
            "name":"Product Name 2",
            "type":"one_color",
            "data":"#000000"
        }
]

我是Angular的新手，但是我已经研究了许多不同的可能性来做到这一点，但是做得不够。任何想法都会受到欢迎！

Answer 1

Take a look at this plunkr

你几乎在那里：

<div ng-if="swatches">
                <div ng-repeat="data in swatches">
                          <div ng-repeat="(key,value) in data">
                            {{key}}:{{value}}
                          </div>
                          <hr>
                </div>
       </div>

Answer 2

angular.module("app", [])

  .run(function($rootScope) {

    $rootScope.results = [

      {
        name: "Demo",
        colors: [{
            "id": 866337128495,
            "title": "Product Title",
            "handle": "product-url",
            "image": "/img.jpg",
            "sku": "SKU001",
            "name": "Product Name",
            "type": "one_color",
            "data": "#000000"
          },
          {
            "id": 866337128496,
            "title": "Product Title2",
            "handle": "product-url2",
            "image": "/img2.jpg",
            "sku": "SKU002",
            "name": "Product Name 2",
            "type": "one_color",
            "data": "#000000"
          }
        ]
      }

    ]

  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="app">

  <div ng-repeat="result in results track by result.uid">
    {{result.name}}
    <div ng-init="swatches=result.colors">
      <div ng-if="swatches">
        <div ng-repeat="swatch in swatches">
          <div ng-repeat="(key, value) in swatch">
            {{key}}:{{value}}
          </div>
          <br>
        </div>
      </div>
    </div>
  </div>

</div>