angularjs – 在深窝json上使用ng-repeat

发布时间：2020-12-17 17:15:46 所属栏目：安全来源：网络整理

导读：我第一次和Angular一起玩,并且在ng-repeat上遇到麻烦,重复思考一个json [ { "class": "Torture","type": "Cruiser","name": "The Impending Doom","leadership": 7,"pts": "250 pts","speed": "35cm","turns": "90u00B0","armour": 5,"squadron": "Death Ma

我第一次和Angular一起玩,并且在ng-repeat上遇到麻烦,重复思考一个json

[
                {
                    "class": "Torture","type": "Cruiser","name": "The Impending Doom","leadership": 7,"pts": "250 pts","speed": "35cm","turns": "90u00B0","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","name": "Pain Giver","weapons": [
                        {
                            "name": "Launch Bays","firepower": 4,"ordnances": [
                                { 
                                    "type":"Fighters","range": "30cm" 
                                },{ 
                                    "type":"Bombers","range": "20cm" 
                                },{ 
                                    "type":"Boats","range": "30cm" 
                                }
                            ]
                        },{
                            "name": "Prow Torpedo Tubes","ordnances": [
                                {   
                                    "type": "Torpedos","range": "30cm" 
                                }
                            ]
                        }
                    ],"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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!