javascript - 如何使用 Angular JS 使用数组迭代 JSON 对象并填充表

Question

我有一个 REST 服务，它返回类似于以下格式的 JSON 数据:

{
    "Africa" : [{
            "country" : "Nigeria",
            "capital" : "Abuja"
        }, {
            "country" : "Kenya",
            "capital" : "Nairobi"
        }, {
            "country" : "Ghana",
            "capital" : "Accra"
        }
    ],
    "Asia" : [{
            "country" : "India",
            "capital" : "New Delhi"
        }, {
            "country" : "China",
            "capital" : "Beijing"
        }
    ],
    "Europe" : [{
            "country" : "France",
            "capital" : "Paris"
        }
    ]
}

我应该如何解析这个结果并填充一个类似于下图的表格:

http://jsfiddle.net/p7yLztwg/

Answer 1

试试这个 Fiddle

<table ng-app="testApp" ng-controller="testController">
<tr>
  <td>Contitent</td>
  <td>Country</td>
  <td>Capital</td>
</tr>
<tr ng-repeat-start="(key, val) in testData">
    <td rowspan="{{val.length}}">{{key}}</td>
    <td>{{val[0].country}}</td>
    <td>{{val[0].capital}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in val.slice(1)">
    <td>{{value.country}}</td>
    <td>{{value.capital}}</td>
</tr>