ng-repeat内的ng-repeat和其他ng-repeat

Question

我从一个服务请求中返回了以下json数据：

[
  {
    "order": 1,
    "service": "DCS 2.X",
    "titulos": {
      "titulo0": "NEW BACKEND VLAN",
      "subtitulos0": {
        "sub1": "1.1New or update Landscape (backend & frontend from TC)"
      },
      "titulo2": "NEW SYSTEM (VIRTUAL MACHINE OR BUILDING BLOCK)",
      "subtitulos2": {},
      "titulo3": "INCREASE OR DRECREASE OF SLICES",
      "subtitulos3": {
        "sub4": "3.1SOM@SAP order"
      }
    }
  },
  {
    "order": 2,
    "service": "DCS 3",
    "titulos": {
      "titulo5": "INCREASE OR DRECREASE OF SLICES",
      "subtitulos5": {
        "sub6": "3.1SOM@SAP order"
      },
      "titulo7": "UPDATE OF AN OPERATING SYSTEM (NOT MAIN RELEASE)",
      "subtitulos7": {
        "sub8": "5.1Change Request (no SOM@SAP order)"
      },
      "titulo9": "DEDICATED CUSTER",
      "subtitulos9": {}
    }
  }
]

我想用三个ng-repeat来显示，就像这样

order 1 service DCS 2.X
     NEW BACKEND VLAN
              1.1New or update Landscape (backend & frontend from TC)
     NEW SYSTEM (VIRTUAL MACHINE OR BUILDING BLOCK)
     INCREASE OR DRECREASE OF SLICES
              3.1SOM@SAP order
order 2 service DCS 3
     INCREASE OR DRECREASE OF SLICES
              3.1SOM@SAP order
     UPDATE OF AN OPERATING SYSTEM (NOT MAIN RELEASE)
              5.1Change Request (no SOM@SAP order)
     DEDICATED CUSTER

我做了这个：

<div ng-repeat="item in orders" class="panel panel-default">
    <div class="panel-heading">Order #{{item.order}} - {{item.service}}</div>
    <div ng-repeat="(key, value) in item.titulos" >
        <div style="font-weight: bold;">{{value}}</div>
        <hr class="track" />
        <div ng-repeat="(key2, value2) in value" >
            {{key2}}
        </div>
    </div>
</div>

但是给了我以下错误：

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: (key2, value2) in value, Duplicate key: string:D, Duplicate value: D

如果我使用track by..也不管用..如果你能帮我，或者给我一个更好的主意

可能有10个或更多的订单..谢谢

Answer 1

<div ng-repeat="n in [42, 42, 43, 43] track by $index">
  {{n}}
</div>

将track by index添加到循环中

docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates

Answer 2

您提供的json格式不正确，无法使用多个ng-repeat...如果json专用于api，则访问方式与本例有所不同。我修复了json，以改进和使用ng-repeats。

HTML

 <div ng-repeat="item in orders track by $index" class="panel panel-default">
    <div class="panel-heading">Order #{{item.order}} - {{item.service}}</div>
    <div ng-repeat="(key, value) in item.titulos track by $index" >
        <div style="font-weight: bold;">{{value}}</div>
        <hr class="track" />
        <div ng-repeat="(key2, value2) in value track by $index" >
            {{key2}}
        </div>
    </div>
</div>

JSON修复

$scope.orders=[
  {
    "order": 1,
    "service": "DCS 2.X",
    "titulos": [
      {
      "titulo": "NEW BACKEND VLAN",
      "subtitulos": [{
        "titulo": "1.1New or update Landscape (backend & frontend from TC)"
      }],
      },
      {
      "titulo": "NEW SYSTEM (VIRTUAL MACHINE OR BUILDING BLOCK)",
      "subtitulos":[]
      },
      {"titulo": "INCREASE OR DRECREASE OF SLICES",
      "subtitulos": [{
        "titulo": "3.1SOM@SAP order"
      }]
      }
    ]
  },
  {
    "order": 2,
    "service": "DCS 3",
    "titulos": [{
      "titulo": "INCREASE OR DRECREASE OF SLICES",
      "subtitulos": [{
        "titulo": "3.1SOM@SAP order"
      }]
      },
      {
      "titulo": "UPDATE OF AN OPERATING SYSTEM (NOT MAIN RELEASE)",
      "subtitulos": [{
        "titulo": "5.1Change Request (no SOM@SAP order)"
      }]
      },
      {
      "titulo": "DEDICATED CUSTER",
      "subtitulos": []
    }]
  }
]