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>

按索引添加轨道

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

Answer 2

你提供的json格式不正确，可以使用多个ng-repeat ...如果json以api的形式进行访问，那么你需要访问的方式与这个例子不同，我修复了json以改进和使用NG-重复。

<强> 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 FIX

$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": []
    }]
  }
]

在ng-repeat和其他ng-repeat中重复ng-repeat

2 个答案: