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

Question

我第一次使用 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>

和 Controller

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

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

Answer 1

军械可以有一个或多个项目，因此您需要再次使用 ngRepeat，如下所示:

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