在一个 ng-repeat 中嵌套 JSON

Question

我对 angular 有点陌生，我在使用 ng-repeats 时遇到了问题。我有一个 ng-repeat 必须在每次重复中显示嵌套对象。你明白我的意思吗？

这是HTML:

<li ng-repeat="rm in rooms">
    <a href="">
        <span id="room">{{rm.room}}</span>
        <span id="rack_num">Rack {{rm.rack}}</span>
        <span id="slot_type">{{rm.type}}</span>
        <span id="slot_id">Slot {{rm.id}}</span>
    </a>
</li>

我有一个 "rooms" 和 "racks" 以及 "slots" 的列表：

 [
{
  "room": 1,
  "rackroom": [
    {
      "rack": 8,
      "rackslots": [
        {
          "slot": 1,
          "id": "EZ345T1R",
          "type": "single"
        }
      ]
    },
    {
      "rack": 12,
      "rackslots": [
        {
          "slot": 3,
          "id": "56XZU28",
          "type": "double"
        }
      ]
    }
  ]
},
{
  "room": 2,
  "rackroom": [
    {
      "rack": 12,
      "rackslots": [
        {
          "slot": 1,
          "id": "TZE57DG",
          "type": "single"
        }
      ]
    },
    {
      "rack": 32,
      "rackslots": [
        {
          "slot": 7,
          "id": "778GHRT",
          "type": "double"
        }
      ]
    }
  ]
}
]

我的控制器是这样的：

$http.get('data/data.json').success(function(data) {

        $scope.rooms = [];
        $scope.slots = [];
        $scope.racks = [];
        angular.forEach(data, function(key, val){
            $scope.rooms.push(key);
            angular.forEach(key.rackroom, function(key, val){
                $scope.racks.push(key);
                angular.forEach(key.rackslots, function(key, val){
                    $scope.slots.push(key);
                });
            });
        });
      });

输出应如下所示：

• Room: 1
• Rack: 12
• Type: single
• Slot: 3

• Room: 1
• Rack: 24
• Type: single
• Slot: 8

看来我错了，因为只显示了房间，没有显示嵌套对象。如果我进行 3 次单独的重复（插槽中的插槽、机架中的机架、房间中的房间）它们都会出现，但我需要一次重复... 感谢您的帮助！

Answer 1

您基本上需要展平嵌套数据：

$http.get('data/data.json').success(function(data) {
  $scope.rooms = [];
  for (var i = 0; i < data.length; i++) {
    var room = data[i];
    for (var j = 0; j < room.rackroom.length; j++) {
      var rack = room.rackroom[j];
      for (var k = 0; k < rack.rackslots.length; k++) {
        var slot = rack.rackslots[k];
        $scope.rooms.push({
          room: room.room,
          rack: rack.rack,
          slot: slot.slot,
          type: slot.type
        });
      }
    }
  }
});

<li ng-repeat="rm in rooms">
    <a href="">
        <span id="room">{{rm.room}}</span>
        <span id="rack_num">Rack {{rm.rack}}</span>
        <span id="slot_type">{{rm.type}}</span>
        <span id="slot_id">Slot {{rm.slot}}</span>
    </a>
</li>

Answer 2

我认为以下内容与您想要的非常接近：

var app = angular.module('demo', []);

app.controller('MainCtrl', function($scope) {
  var data = [{
    "room": 1,
    "rackroom": [{
      "rack": 8,
      "rackslots": [{
        "slot": 1,
        "id": "EZ345T1R",
        "type": "single"
      }]
    }, {
      "rack": 12,
      "rackslots": [{
        "slot": 3,
        "id": "56XZU28",
        "type": "double"
      }]
    }]
  }, {
    "room": 2,
    "rackroom": [{
      "rack": 12,
      "rackslots": [{
        "slot": 1,
        "id": "TZE57DG",
        "type": "single"
      }]
    }, {
      "rack": 32,
      "rackslots": [{
        "slot": 7,
        "id": "778GHRT",
        "type": "double"
      }]
    }]
  }];

  $scope.rooms = [];
  angular.forEach(data, function(room) {

    angular.forEach(room.rackroom, function(rack) {
      angular.forEach(rack.rackslots, function(slot) {
        $scope.rooms.push({
          room: room.room,
          rack: rack.rack,
          type: slot.type,
          slot: slot.slot
        });
      });
    });
  });
});

.room,
.rack_num,
.slot_type,
.slot_id {
  display: list-item;
}
.room_item {
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="demo" ng-controller="MainCtrl">
  <ul>
    <li class="room_item" ng-repeat="rm in rooms">
      <a href="">
        <span class="room">Room: {{rm.room}}</span>
        <span class="rack_num">Rack: {{rm.rack}}</span>
        <span class="slot_type">Type: {{rm.type}}</span>
        <span class="slot_id">Slot {{rm.slot}}</span>
      </a>
    </li>
  </ul>
</div>

标记可能不太正确，但您可以从此处进行调整。

此外，如果您要重复某些内容，则不应对这些元素使用 id。 ids 应该在整个页面上是唯一的。像我一样使用类。

在一个 ng-repeat 中嵌套 JSON

Nested JSON in one ng-repeat

json

angularjs

ng-repeat

angularjs-ng-repeat