2015-06-04 39 views
3

这是我的json文件。如何在json中使用角js获取对象内的对象

{ 
"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表格, 所有城市的所有的名字和军衔,但我无法做到这一点。 角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> 

可能是我可以改变在控制文件中的代码用于获取数据,但不知道会工作或没有。

回答

1

第一件事DIV一个TR内不允许(不也是工作) - 选中此<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以表格格式显示它。

+0

谢谢,现在正在工作。 –

0

你正在尝试做的是什么,指city.states但如果作为国家不json..change它的目的是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>