2015-06-04 69 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>