如何为这种结构应用 ng-repeat答案

【问题标题】：How to apply ng-repeat for such structure如何为这种结构应用 ng-repeat
【发布时间】：2016-11-30 17:58:20
【问题描述】：

我想检索一组项目，然后显示在这些项目下列出的 UI 属性中。问题是我从其中一项服务收到的 JSON 导致了问题：

而不是我通常期望的结构，即

"items": [
    {
        "field1": "value1",
        "field2": "value2",
        "id":"ABCDEF1234"
    },
    {
        "field1": "value1",
        "field2": "value2",
        "id":"XYZ12345"
    }
]

我收到了：

"items": [
    {
      "ABCDEF1234": {
        "field1": "value1",
        "field2": "value2",
        "id":"ABCDEF1234"

      }
    },
    {
      "XYZ12345": {
        "field1": "value1",
        "field2": "value2",
        "id":"XYZ12345"
      }
    }
]

通常我会将“项目”分配给 $scope.items，然后像这样使用 ng-repeat：

    <div ng-repeat="item in items">
      <ul>
        <li>{{item.id}}</li>
        <li>Field1 - {{item.field1}}</li>
        <li></li>Field2 - {{item.field2}}</li>
      </ul>
    </div>

但在这种情况下，每个项目都由动态 id 表示，除了显示为字段之一外，还用作对象的键。我应该如何使用 ng-repeat 遍历此类集合以显示如下内容：

ABCDEF1234
字段 1 - 值 1
字段 2 - 值 2

XYZ12345
字段 1 - 值 1
字段 2 - 值 2

提前感谢您的帮助。

【问题讨论】：

这是标准的 ng-repeat 程序。你能分享你到目前为止所尝试的吗？ JSON 是如何导致问题的？

标签： angularjs ng-repeat

【解决方案1】：

<div ng-repeat="item in items">
    <div ng-repeat="(itemKey, itemValue) in item">
        <h2>{{ itemKey }}</h2>
        <ul ng-repeat="(key, value) in itemValue" ng-if="key !== 'id'">
            <li>{{ key }} - {{ value }}</li>
        </ul>
    </div>
</div>

【讨论】：

非常感谢您的回答。

【解决方案2】：

您可以在收到它时将其映射为更可用的格式。例如

items = items.map(item => item.values[0]);

这会将它映射到

[
  {
    "field1": "value1",
    "field2": "value2",
    "id": "ABCDEF1234"
  },
  {
    "field1": "value1",
    "field2": "value2",
    "id": "XYZ12345"
  }
]

【讨论】：

箭头函数？

【解决方案3】：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.items = [{
    "ABCDEF1234": {
      "field1": "value1",
      "field2": "value2",
      "id": "ABCDEF1234"

    }
  }, {
    "XYZ12345": {
      "field1": "value1",
      "field2": "value2",
      "id": "XYZ12345"
    }
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <div ng-repeat="item in items">
    <div ng-repeat="(key, value) in item">
      {{key}}
      <div ng-repeat="(key, value) in value" ng-if="key!== 'id'">
        {{key}}-{{value}}
      </div>
      <br/>
    </div>
  </div>
</div>

【讨论】：

非常感谢您提供这些详细信息。

【解决方案4】：

如果你有一个很大的列表，ng-repeat会导致性能问题。它会创建许多子范围和观察者。最好限制使用ng-repeat。我建议你修改所需格式的数据，然后使用单个 ng-repeat。

【讨论】：