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

Question

我想检索项目集合，然后显示在这些项目下列出的 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"
      }
    }
]

通常我会将 'items' 分配给 $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

预先感谢您的帮助。

Answer 1

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

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

这会将其映射到

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

Answer 2

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

Answer 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>

Answer 4

ng-repeat 会导致性能问题如果你有一个大的 list.It 会创建一些子作用域并且 watchers.It 最好限制使用 ng-repeat.I 建议你以所需格式修改数据，然后使用单个 ng-repeat。

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

How to apply ng-repeat for such structure

angularjs

ng-repeat