如何使用JSON映射响应生成Angular ng表格

Question

我需要使用两个具有Angular ng-repeat的API生成如下所示的表格？如何做到这一点

+---------------+---------------------+------------+------------+ 
| Continent | Continent Shortcode | City | Population | 
+---------------+---------------------+------------+------------+ 
| Asia   | AS     | Beijing | 21.5  | 
|    |      | Manila  | 1.6  | 
| Europe  | EU     | London  | 8.6  | 
|    |      | Paris  | 2.2  | 
| North America | NA     | Washington | 7   | 
| South America | SA     | Brasilia | 2.5  | 
| Australia  | AU     | Canberra | 0.3  | 
+---------------+---------------------+------------+------------+ 

REST端点getCityStatsByContinent(continentId)？ - > /API /统计/城市/列表大陆= 100,200,300,400,500

{ 
    "100" : [{ 
      "city" : "Beijing", 
      "population" : 21.5m 
     }, { 
      "city" : "Manila", 
      "population" : 1.6m 
     } 
    ], 
    "200" : [{ 
      "city" : "London", 
      "population" : 8.6m 
     }, { 
      "city" : "Paris", 
      "population" : 2.2m 
     } 
    ], 
    "300" : [{ 
      "city" : "Washington", 
      "population" : 7m 
     } 
    ], 
    "400" : [{ 
      "city" : "Brasilia", 
      "population" : 2.5m 
     } 
    ], 
    "500" : [{ 
      "city" : "Canberra", 
      "population" : 0.3m 
     } 
    ], 
} 

为getContinetDetails() REST端点 - >/API /大洲

[ 
    { 
     "id" : 100, 
     "code" : "AS", 
     "name" : "Asia" 
    }, { 
     "id" : 200, 
     "code" : "EU", 
     "name" : "Europe" 
    }, { 
     "id" : 300, 
     "code" : "NA", 
     "name" : "North America" 
    }, { 
     "id" : 400 
     "code" : "SA", 
     "name" : "South America" 
    }, { 
     "id" : 500, 
     "code" : "AU", 
     "name" : "Australia" 
    } 
] 

我只能想到从下面的代码开始（假设第一个API响应存储在citiesByContinentId中）。但我坚持的东西应该是解决从/ API的continentId正确的方法/大洲

<tr ng-repeat ="(continentId, cityStats) in citiesByContinentId"> 
    <td>{{ continentId }}</td> 
<tr> 

Answer 1

angular.module('app', []) 
 
    .controller('sampleCtrl', function($scope) { 
 
    $scope.ctiyPopulation = { 
 
     "100": [{ 
 
     "city": "Beijing", 
 
     "population": "21.5 m" 
 
     }, { 
 
     "city": "Manila", 
 
     "population": "1.6 m" 
 
     }], 
 
     "200": [{ 
 
     "city": "London", 
 
     "population": "8.6 m" 
 
     }, { 
 
     "city": "Paris", 
 
     "population": "2.2 m" 
 
     }], 
 
     "300": [{ 
 
     "city": "Washington", 
 
     "population": "7 m" 
 
     }], 
 
     "400": [{ 
 
     "city": "Brasilia", 
 
     "population": "2.5 m" 
 
     }], 
 
     "500": [{ 
 
     "city": "Canberra", 
 
     "population": "0.3 m" 
 
     }] 
 
    }; 
 

 
    $scope.continentDetails = [{ 
 
     "id": 100, 
 
     "code": "AS", 
 
     "name": "Asia" 
 
    }, { 
 
     "id": 200, 
 
     "code": "EU", 
 
     "name": "Europe" 
 
    }, { 
 
     "id": 300, 
 
     "code": "NA", 
 
     "name": "North America" 
 
    }, { 
 
     "id": 400, 
 
     "code": "SA", 
 
     "name": "South America" 
 
    }, { 
 
     "id": 500, 
 
     "code": "AU", 
 
     "name": "Australia" 
 
    }]; 
 
    });

table { 
 
    width: 100% 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #eee; 
 
    padding:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="sampleCtrl"> 
 
    <table cellpadding="0" cellspacing="0"> 
 
    <thead> 
 
     <tr> 
 
     <th>Continent</th> 
 
     <th>Continent Shortcode</th> 
 
     <th>City</th> 
 
     <th>Population</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody ng-repeat="continent in continentDetails"> 
 
     <tr ng-repeat="city in ctiyPopulation[continent.id]"> 
 
     <td><span ng-if="$index===0">{{continent.name}}</span></td> 
 
     <td><span ng-if="$index===0">{{continent.code}}</span></td> 
 
     <td>{{city.city}}</td> 
 
     <td>{{city.population}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>