Как загрузить вложенные массивы в угловом?

Question

У меня есть код какого-то кода, с которым я играю. Я хочу загрузить данные json через службу, а затем использовать ng-repeat для загрузки массивов.

Проблема в том, что он загружает первый массив просто отлично. Однако вложенный массив «data.cities» не отображается. В консоли указано, что слишком много рекурсии. Вот ссылка и код ниже.

Codepen Link

HTML

<div ng-app="myApp" ng-controller="nameController"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 

      <div ng-repeat="r in data"> 
       <div>{{ r.region }} - x: {{ r.x}}, y: {{r.y}} ---- {{ r.desc}}</div> 
       <div ng-repeat="city in data.cities">{{city.name}}</div> 
       <div> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 

JS

var app = angular.module("myApp", []); 

app.controller("nameController", function($scope, mapService) { 
$scope.data = mapService.mapData(); 
}); 

app.service("mapService", function() { 

var mapInfo = [{ 
    region: "America", 
    desc: "Some info about America", 
    x: 50, 
    y: 200, 
    cities: [{ 
     name: "Chicago", 
     x: 20, 
     y: 232 
    }, { 
     name: "Los Angeles", 
     x: 52, 
     y: 124 
    }] 
}, { 
    region: "Europe", 
    desc: "Some info about Europe", 
    x: 10, 
    y: 24, 
    cities: [{ 
     name: "Chicago2", 
     x: 20, 
     y: 232 
    }, { 
     name: "Los Angeles2", 
     x: 52, 
     y: 124 
    }] 
}, { 
    region: "China", 
    desc: "Some info about China", 
    x: 88, 
    y: 126, 
    cities: [{ 
     name: "Chicago3", 
     x: 20, 
     y: 232 
    }, { 
     name: "Los Angeles3", 
     x: 52, 
     y: 124 
    }] 
}]; 

this.mapData = function() { 
    /*angular.forEach(pics, function(value, key) { 
    //console.log("key", value.name); 
     return value.name; 
    });*/ 
    return mapInfo; 
}; 

}); 

Answer 1

обновление только эта линия

<div ng-repeat="city in r.cities">{{city.name}}</div> 

http://jsfiddle.net/L01rjepb/

Answer 2

это becuse citis в r не data

попробовать, как этот

ng-repeat="city in r.cities" 

CODEPEN

Answer 3

<div ng-repeat="city in r.cities">{{city.name}}</div> является то, что вам нужно.

<div ng-app="myApp" ng-controller="nameController"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 

      <div ng-repeat="r in data"> 
       <div>{{ r.region }} - x: {{ r.x}}, y: {{r.y}} ---- {{ r.desc}}</div> 
       <div ng-repeat="city in r.cities">{{city.name}}</div> 
       <div> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 

Answer 4

Изменить data.cities (исходный объект)

<div ng-repeat="city in data.cities">{{city.name}}</div> 

к r.cities (итератор пункт)

<div ng-repeat="city in r.cities">{{city.name}}</div> 

http://codepen.io/anon/pen/dYWgXd

Answer 5

ниже образец может помочь вам,

<table> 
    <tbody ng-repeat="row in rows"> 
    <tr> 
     <th>{{row.name}}</th> 
    </tr> 
    <tr ng-repeat="sub in row.subrows"> 
     <td>{{sub.name}}</td> 
    </tr> 
    </tbody> 
</table>