如何使用角度js获取json中对象内部的对象答案

【问题标题】：how to get the object inside object in json using angular js如何使用角度js获取json中对象内部的对象
【发布时间】：2015-06-04 16:33:08
【问题描述】：

这是我的 json 文件。

{
"countries":[
    {
        "country": "India",
        "cities" : [{
            "name": "Bangalore",
            "rank": "40"
        },
        {   "name": "Mumbai",
            "rank": "32"
        },
        {   "name": "Kolkata",
            "rank": "54"
        },
        {   "name": "Chennai",
            "rank": "42"
        }]
    },      
    {   "country": "China",
        "cities":[{"name": "Guangzhou",
            "rank": "111"
        },
        {   "name": "Fuzhou",
            "rank": "21"
        },
        {   "name": "Beijing",
            "rank": "90"
        },
        {   "name": "Baotou",
            "rank": "23"
        }]
    }
]}

我想在html表格中显示所有城市的名称和排名，但我无法做到这一点。 Angular js 代码为：

app.controller('cityCtrl1', function($scope, $http){
$http.get("http://localhost:8080/Angular%20Examples/angularCountries/app/json/countriesToCities1.json").success(function(data){
    $scope.cities  = data.countries;
});

});

HTML代码是：

    <tr ng-repeat="city in cities | filter: selectName1">
        <div ng-repeat="details in city.cities">
            <td> {{details.name}} </td>
            <td> {{details.rank}}</td>
        </div>
   </tr>

也许我可以更改控制器文件中的代码以获取数据，但不确定是否可行。

【问题讨论】：

标签： html angularjs

【解决方案1】：

不允许 tr 内的第一件事 div（也不工作） - 检查这个<div> into a <tr>: is it correct?

所以我有改变格式 -

<ul class="table" ng-repeat="country in cities.countries">
   <li class="city-row" ng-repeat="city in country.cities">
      <span class="city-name">{{city.name}}</span>      
      <span class="city-count">{{city.rank}}</span>
   </li>
</ul>

我已经创建了工作示例 - http://plnkr.co/edit/1GTqNPcfigd9XRaAy0vg

应用您自己的 CSS 以表格格式显示。

【讨论】：

【解决方案2】：

你想要做的是，引用 city.states 但是 states 不是 json 的对象..将其更改为 city.cities

<tr ng-repeat="city in cities | filter: selectName1">
        <div ng-repeat="details in city.cities">
            <td> {{details.name}} </td>
            <td> {{details.rank}}</td>
        </div>
   </tr>

【讨论】：