angularjs - 在深度嵌套的json上使用ng-repeat

我是第一次和Angular一起玩，并且在ng-repeat上遇到了麻烦，重复了一个json的想法

            [
                {
                    "class": "Torture",
                    "type": "Cruiser",
                    "name": "The Impending Doom",
                    "leadership": 7,
                    "pts": "250 pts",
                    "speed": "35cm",
                    "turns": "90\u00B0",
                    "armour": 5,
                    "squadron": "Death Makes",
                    "hitpoints": 6,
                    "weapons": [
                        {
                            "name": "Impaler",
                            "firepower": 2,
                            "ordnances": [
                                {
                                    "type": "Attack Craft",
                                    "range": "30cm"
                                }
                            ]
                        }
                    ],
                    "refits": {},
                    "crew skills": {},
                    "battle log": [
                        {
                            "Data": "",
                            "Log": ""
                        }
                    ]
                },
                {
                    "class": "Torture",
                    "type": "Cruiser",
                    "name": "Pain Giver",
                    "leadership": 7,
                    "pts": "250 pts",
                    "speed": "35cm",
                    "turns": "90\u00B0",
                    "armour": 5,
                    "squadron": "Death Makes",
                    "hitpoints": 6,
                    "weapons": [
                        {
                            "name": "Launch Bays",
                            "firepower": 4,
                            "ordnances": [
                                {
                                    "type":"Fighters",
                                    "range": "30cm"
                                },
                                {
                                    "type":"Bombers",
                                    "range": "20cm"
                                },
                                {
                                    "type":"Boats",
                                    "range": "30cm"
                                }
                            ]
                        },
                        {
                            "name": "Prow Torpedo Tubes",
                            "firepower": 4,
                            "ordnances": [
                                {
                                    "type": "Torpedos",
                                    "range": "30cm"
                                }
                            ]
                        }
                    ],
                    "refits": {},
                    "crew skills": {},
                    "battle log": [
                        {
                            "Data": "",
                            "Log": ""
                        }
                    ]
                }
            ]

现在，我遇到的问题是，当我尝试重复考虑军械的问题时，我会担心，因为那里有两种不同数量的军械。

这是我的HTML

                    <div ng-repeat="ship in fleet" class="squadron__table">
                    <table>
                        <caption>{{ ship.name }}</caption>
                            <tr>
                                <td class="space">{{ ship.type }}</td>
                                <td class="space">{{ ship.class }}</td>
                                <td class="space">{{ ship.leadership }}</td>
                                <td class="space">{{ ship.speed }}</td>
                                <td class="space">{{ ship.turns }}</td>
                                <td class="space">{{ ship.armour }}</td>
                                <td class="space">{{ ship.hitpoints }}</td>
                                <td class="space">{{ ship.pts }}</td>
                            </tr>
                            <tr>
                                <th colspan="2">Armament</th>
                                <th colspan="2">Fire power</th>
                                <th colspan="4">Ordnance</th>
                            </tr>
                            <tr ng-repeat="weapon in ship.weapons">
                                <td colspan="2">{{ weapon.name }}</td>
                                <td colspan="2">{{ weapon.firepower }}</td>
                                <td colspan="2">
                                            {{ weapon.ordnances.type }}
                                            ---
                                            {{  weapon.ordnances.range }}
                                </td>
                            </tr>
                    </table>
                 </div>

和控制器

$http.get( '/json/' + $routeParams.squadrionName + '.json', { cache: $templateCache } )
  .success(function( data) {
    $scope.fleet = data;
  })

我寻找的最终结果是
当船上有发射舱和鱼雷时，它会打印出三种不同类型的船和一艘鱼雷。

最佳答案

军械可以包含一项或多项，因此您需要再次使用ngRepeat，如下所示：

<td colspan="4">
  <div ng-repeat="ordnance in weapon.ordnances">
    {{ ordnance.type }} --- {{ ordnance.range }}
  </div>
</td