Question

我对角度有点新，而且我遇到了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>

我有一个＆＃34;房间＆＃34;和＆＃34;架子＆＃34;和＆＃34;插槽＆＃34;：

 [
{
  "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

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

＆＃13;

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
        });
      });
    });
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

标记可能不太正确，但你可以从这里调整它。

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

嵌套JSON在一个ng-repeat中

2 个答案: